jquery easyui datagrid實現單行的上移下移，以及儲存移動的結果

標籤：

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實現單行的上移下移，以及儲存移動的結果