zoukankan      html  css  js  c++  java
  • 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             }
  • 相关阅读:
    小程序的目录结构及基本代码编写流程
    vue+hbuilder监听安卓返回键问题
    VUE项目用hbuilder 打包为手机APP
    VUE组件相关总结!
    VUE常用指令总结!
    vue开发者工具vue-devtools-4.1.4_0.crx谷歌插件下载及安装
    vue-cli环境搭建初探!
    PHP返回Json数据函数封装
    WeX5入门之HelloWorld
    WeX5入门之欢乐捕鱼打包
  • 原文地址:https://www.cnblogs.com/mabaishui/p/5768530.html
Copyright © 2011-2022 走看看