1、實現行的上移、下移、

說明：

1.1 通過datagrid生成的表格有固定的格式，比如，表格div的class名是datagrid-view。比如每一行tr都有id和datagrid-row-index屬性等。

1.2 在上移和下移以后，我們將移動以后的兩行的id和datagrid-row-index屬性也必須互換，這樣能保證datagrid-row-index=0的行肯定是

頁面顯示的表格的第一行，=1的是第二行等等。將來保存的時候，就是通過取這個屬性值找某一行的數據的。

1 function move(isUp) { 2 var selections = $dg.datagrid('getSelections'); 3 if(selections.length == 0){ 4 return; 5 } 6 var $view = $('div.datagrid-view'); 7 var index = $dg.datagrid('getRowIndex',selections[0]); 8 var $row = $view.find('tr[datagrid-row-index=' + index + ']'); 9 if (isUp) { 10 $row.each(function(){ 11 var prev = $(this).prev(); 12 var prevId = prev.attr('id'); 13 var prevDatagridRowIndex = prev.attr('datagrid-row-index'); 14 var thisId = $(this).attr('id'); 15 var thisDatagridRowIndex = $(this).attr('datagrid-row-index'); 16 prev.length && $(this).insertBefore(prev); 17 $(this).attr('id',prevId); 18 $(this).attr('datagrid-row-index',prevDatagridRowIndex); 19 prev.attr('id',thisId); 20 prev.attr('datagrid-row-index',thisDatagridRowIndex); 21 }); 22 } else { 23 $row.each(function(){ 24 var next = $(this).next(); 25 var nextId = next.attr('id'); 26 var nextDatagridRowIndex = next.attr('datagrid-row-index'); 27 var thisId = $(this).attr('id'); 28 var thisDatagridRowIndex = $(this).attr('datagrid-row-index'); 29 next.length && $(this).insertAfter(next); 30 $(this).attr('id',nextId); 31 $(this).attr('datagrid-row-index',nextDatagridRowIndex); 32 next.attr('id',thisId); 33 next.attr('datagrid-row-index',thisDatagridRowIndex); 34 }); 35 } 36 }

2、保存移動的結果

說明：每一個tr包含若干個td，每個td都有field屬性，即表格展示對象的相應屬性名，例子中goodsId是我要展示的商品的主鍵。每個td下都包含一個div，通過層層

find找到這個div以后，值就得到了。

1 function nextStep() { 2 var arrayData = $dg.datagrid('getData').rows; 3 var $view = $('div.datagrid-view'); 4 if(arrayData.length!=0){ 5 saveIds = ''; 6 for(var index=0;index<arrayData.length;index++){ 7 var goodsId = $view.find('tr[datagrid-row-index=' + index + ']').find("td[field='goodsId']").find('div').html(); 8 saveIds += goodsId; 9 if(index != arrayData.length-1){ 10 saveIds += ','; 11 } 12 } 13 $.ajax({ 14 url:'${pageContext.request.contextPath}/coupons/getTemplateId', 15 type:'post', 16 dataType:'json', 17 success:function(result){ 18 window.location.href="${pageContext.request.contextPath}/coupons/tpl"+result+"?goodsId="+saveIds; 19 } 20 }); 21 } 22 }

?

總結

以上是生活随笔為你收集整理的jquery easyui datagrid实现单行的上移下移，以及保存移动的结果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。