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             }

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值