JQuery Easyui Datagrid implements the move up and down of a single row and saves the result of the move, jqueryeasyui

JQuery Easyui Datagrid implements the move up and down of a single row and saves the result of the move, jqueryeasyui

1. Move rows up, down,

Note:

1.1 tables generated through the datagrid have a fixed format. For example, the class Name of the table div is datagrid-view. For example, each row of tr has the id and datagrid-row-index attributes.

1.2 after moving up and down, the IDs and the datagrid-row-index attributes of the two rows after moving down must also be exchanged, this ensures that the row in the datagrid-row-index = 0 must be the first row of the table displayed on the page, and the row in the row = 1 is the second row. In the future, we will find a row of data by taking this attribute value.

function move(isUp) {var selections = $dg.datagrid('getSelections');if(selections.length == 0){return;}var $view = $('div.datagrid-view');var index = $dg.datagrid('getRowIndex',selections[0]);var $row = $view.find('tr[datagrid-row-index=' + index + ']');if (isUp) {$row.each(function(){var prev = $(this).prev();var prevId = prev.attr('id');var prevDatagridRowIndex = prev.attr('datagrid-row-index');var thisId = $(this).attr('id');var thisDatagridRowIndex = $(this).attr('datagrid-row-index');prev.length && $(this).insertBefore(prev);$(this).attr('id',prevId);$(this).attr('datagrid-row-index',prevDatagridRowIndex);prev.attr('id',thisId);prev.attr('datagrid-row-index',thisDatagridRowIndex);});} else {$row.each(function(){var next = $(this).next();var nextId = next.attr('id');var nextDatagridRowIndex = next.attr('datagrid-row-index');var thisId = $(this).attr('id');var thisDatagridRowIndex = $(this).attr('datagrid-row-index');next.length && $(this).insertAfter(next);$(this).attr('id',nextId);$(this).attr('datagrid-row-index',nextDatagridRowIndex);next.attr('id',thisId);next.attr('datagrid-row-index',thisDatagridRowIndex);});}}

2. Save the moving result

Note: Each tr contains several td S, and each td has the field attribute, that is, the corresponding attribute name of the table Display object. In this example, goodsId is the primary key of the item to be displayed. Each td contains a div through layers

Find finds the div and the value is obtained.

function nextStep() {var arrayData = $dg.datagrid('getData').rows;var $view = $('div.datagrid-view');if(arrayData.length!=0){saveIds = '';for(var index=0;index<arrayData.length;index++){var goodsId = $view.find('tr[datagrid-row-index=' + index + ']').find("td[field='goodsId']").find('div').html();saveIds += goodsId;if(index != arrayData.length-1){saveIds += ',';}}$.ajax({url:'${pageContext.request.contextPath}/coupons/getTemplateId',type:'post',dataType:'json',success:function(result){window.location.href="${pageContext.request.contextPath}/coupons/tpl"+result+"?goodsId="+saveIds;}});}}

The above is a small series of jQuery Easyui Datagrid for you to implement a single row up Move down and save the moving results, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!