easyUI DataGrid多行上下移动排序，可直接保存到后台

╰半夏微凉° 2024-04-18 07:39 46阅读 0赞

今天遇到这个业务，记录下来，参考至 [https://bbs.csdn.net/topics/390641047][https_bbs.csdn.net_topics_390641047]

**1.移动行操作（相对于2只是静态移动）**

function move(isUp) {
    	var dt=$('#mainTable');
        var selections = dt.datagrid("getSelections");
        if(selections.length == 0){
            return;
        }
        var length = dt.datagrid("getRows").length;
        for(var i = 0; i < selections.length; i++){
            var index ,$i,newIndex;
            if(isUp){
                $i = i;
                index = dt.datagrid('getRowIndex',selections[$i]);
                if(index <= 0)return;
                newIndex = index - 1;
            }else{
                var $i = selections.length-1-i;
                index = dt.datagrid('getRowIndex',selections[$i]);
                if(index >= length-1)return;
                newIndex = index + 1;
            }
            dt.datagrid("deleteRow",index);
            dt.datagrid("insertRow",{index : newIndex,row:selections[$i]});
            dt.datagrid("selectRow",newIndex);
        }
    }

**2.移动行并且更新列序号，这里更新orderNo排序号（相对于1可以用 getChanges获取到移动过的行，包括序号修改过的行，可以直接保存到后台）**

function move1(isUp) {
    	var dt=$('#mainTable');
        var selections = dt.datagrid("getSelections");
        if(selections.length == 0){
            return;
        }
        var datas = dt.datagrid("getRows");
        var length = dt.datagrid("getRows").length;
        //缓存选中行
        var rowIndexs=[];
        //更新序号，删除行，插入行
        for(var i = 0; i < selections.length; i++){
            var index,$i,newIndex;
            if(isUp){
                $i = i;
                index = dt.datagrid('getRowIndex',selections[$i]);
                if(index <= 0)return;
                newIndex = index - 1;
                //修改序号
                selections[$i].orderNo = parseInt(selections[$i].orderNo) - 1;
                dt.datagrid('updateRow',{ index: newIndex,row: {orderNo : parseInt(datas[newIndex].orderNo) + 1 } });
            }else{
                var $i = selections.length-1-i;
                index = dt.datagrid('getRowIndex',selections[$i]);
                if(index >= length-1)return;
                newIndex = index + 1;
                //修改序号
                selections[$i].orderNo = parseInt(selections[$i].orderNo) + 1;
                dt.datagrid('updateRow',{ index: newIndex,row: {orderNo : parseInt(datas[newIndex].orderNo) - 1 } });
            }
            dt.datagrid("deleteRow",index);
            //插入行
            dt.datagrid("insertRow",{index : newIndex,row:selections[$i]});
            //缓存选中行
            rowIndexs.push(newIndex);
        }
        //重新选择行
        for(var i=0; i<rowIndexs.length; i++){
        	dt.datagrid("selectRow",rowIndexs[i]);
        }
    }
    
    
    function save(){
        //保存数据
        var rows = $('#mainTable').datagrid('getChanges');
    //    $.ajax
    }

[https_bbs.csdn.net_topics_390641047]: https://bbs.csdn.net/topics/390641047

发表评论取消回复

表情：

评论列表（有 0 条评论，46人围观）

还没有评论，来说两句吧...

相关阅读

相关 easyUI DataGrid多行上下移动排序，可直接保存到后台

天遇到这个业务，记录下来，参考至 [https://bbs.csdn.net/topics/390641047][https_bbs.csdn.net_topics_39...

╰半夏微凉°/ 2024年04月18日 07:39/ 0 赞/ 47 阅读

相关 datagrid排序 java_easyUI 添加排序到datagrid

@author YHC 这个示例展示如何排序datagrid通过点击列表头. ![1344568376\_2836.png][1344568376_2836.png] 在

亦凉/ 2022年11月10日 00:56/ 0 赞/ 173 阅读

相关 JQuery EasyUI datagrid 键盘上下控制选中行

$.extend($.fn.datagrid.methods, { keyCtr : function (jq) { retur

向右看齐/ 2022年08月24日 11:46/ 0 赞/ 201 阅读

相关 EasyUI DataGrid可编辑单元格

效果如图： ![SouthEast][] 首先在需要可编辑的列上添加一个editor属性，列定义为numberbox编辑类型 <th field="SCOR

本是古典何须时尚/ 2022年08月02日 12:53/ 0 赞/ 285 阅读

相关【easyui】datagrid的列可编辑

1 使用editor方法，来实现可编辑 { field: 'value', title: '分配计划', width: 100, align: 'center', s

迈不过友情╰/ 2022年07月13日 00:43/ 0 赞/ 469 阅读

相关【easyui】datagrid根据条件隐藏行

rowStyler: function (index, row) { if (row.isEnd == '1') {

朴灿烈づ我的快乐病毒、/ 2022年07月13日 00:22/ 0 赞/ 582 阅读

相关 jquery-EasyUI datagrid 换行

加上参数：nowrap: false,即可。如下代码： $("\userList").datagrid(\{ width: 'auto', hei

怼烎@/ 2022年07月12日 01:29/ 0 赞/ 319 阅读

相关 easyui datagrid 后台分页+排序

一、jsp页面定义table <div><table id="dg"></table></div> 二、js页面加载table $(function ()

男娘i/ 2022年05月24日 06:11/ 0 赞/ 383 阅读

相关 easyui datagrid 表头 sort 排序

datagrid的点击列表头刷新，分为两种，一种是页面刷新，不涉及后台服务器数据，不会从新查询[数据库][Link 1]，只会刷新当前页数据；一种是服务器级刷新，会重新加

骑猪看日落/ 2021年08月27日 02:33/ 0 赞/ 463 阅读

相关 easyui ——datagrid多表头

datagrid的多表头设置，主要是通过columes属性设置。如果是但标头，columns数组里面是一个一维数组；如果是多表头，columns数组中应该是个多个一维数组，同时

系统管理员/ 2021年05月12日 11:51/ 0 赞/ 684 阅读