Jquery Easy UI Datagrid 上下移动批量保存数据

DataGrid with 上下移动批量保存数据

通过前端变量保存修改数据集合，一次性提交后台执行

本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来保存上下移动修改的数据，但实践过程中，发现js arry数组属于引用传递值，碰到一些问题，由于这次时间紧，不得已自己创建了数组，

单独实现了上下移动后的数据，只筛选出修改过的行，点保存的时候一次性发送给后台处理。等下次有时间再细优化下本次代码，最终要结合getChanges混合使用。代码草乱忘读者勿喷，有对easyui熟悉的朋友可以一起探讨下。不多说了，直接上代码。

提示：下载easyui1.52官方包解压，jquery-easyui-1.5.2demodatagrid目录下 创建datagrid_data3.json和simpletoolbar-上下移动.html文件。

datagrid_data3.json：

{"total":10,"rows":[
    {"id": 1,"name": "test1","sortnum": 1},
    {"id": 2,"name": "test2","sortnum": 2},
    {"id": 3,"name": "test3","sortnum": 3},
    {"id": 4,"name": "test4","sortnum": 4},
    {"id": 5,"name": "test5","sortnum": 5},
    {"id": 6,"name": "test6","sortnum": 6},
    {"id": 7,"name": "test7","sortnum": 7},
    {"id": 8,"name": "test8","sortnum": 8},
    {"id": 9,"name": "test9","sortnum": 9},
    {"id": 10,"name": "test10","sortnum": 10}
]}

simpletoolbar-上下移动.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DataGrid with Toolbar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    <script type="text/javascript">
        var datagridObj;
        var temprows = [];  //上下移动临时字典
        var rowsResult = []; //提交后台数据
        var rowsArray = []; //保存原数据做比较
        var myColumns = [[
            { field: 'id', title: '编号',  30 },
            { field: 'name', title: '名称',  30 },
            { field: 'sortnum', title: '排序',  30, /*hidden: 'true'*/ },
        ]];
        var myToolbar = [{
            text: 'Add',
            iconCls: 'icon-add',
            handler: function () {
                alert('添加');
            }
        }, {
            text: 'Edit',
            iconCls: 'icon-edit',
            handler: function () {
                if (editRow != undefined) {
                    datagridObj.datagrid('endEdit', editRow);
                }
            }
        }, '-', {
            text: 'Save',
            iconCls: 'icon-save',
            handler: function () {
                if (rowsResult.length > 0) {
                    //var rows = datagridObj.datagrid('getChanges');
                    var rowstr = JSON.stringify(rowsResult);
                    console.log(rowstr);
                    alert(rowstr);
                }
                else {
                    alert('未做任何修改');
                }
            }
        }, '-', {
            text: '撤销', iconCls: 'icon-redo', handler: function () {
                editRow = undefined;
                datagridObj.datagrid('rejectChanges');
                datagridObj.datagrid('unselectAll');
            }
        }, '-', {
                text: '上移', iconCls: 'icon-up', handler: function () {
                    rowsResult = datagridRowMove('myDatagridList', 'sortnum', true);
                    console.log('rowsResult:' + JSON.stringify(rowsResult));
            }
        }, '-', {
                text: '下移', iconCls: 'icon-down', handler: function () {
                    rowsResult = datagridRowMove('myDatagridList', 'sortnum', false);
                    console.log('rowsResult:' + JSON.stringify(rowsResult));
            }
        }];
        $(function () {
            datagridObj = $("#myDatagridList");
            ShowDataGridAll('myDatagridList', '', 'datagrid_data3.json', false,
                myColumns, 'id', 'sortnum', myToolbar, false,
                myOnAfterEdit, myOnDblClickRow, myOnClickRow, myOnLoadSuccess);
        });

        function myOnAfterEdit(rowIndex, rowData, changes) {
            endEditing();
        }
        function myOnDblClickRow(rowIndex, rowData) {

        }
        function myOnClickRow(rowIndex, rowData) {

        }
        function myOnLoadSuccess(data) {
            //这里特别声明下，js数组是引用传递，通过格式化字符串方式值类型储存
            for (var i = 0; i < datagridObj.datagrid('getRows').length; i++) {
                var a = JSON.stringify(datagridObj.datagrid('getRows')[i]);
                rowsArray.push(a);
            }
        }

        var editIndex = undefined;
        function endEditing() {
            if (editIndex == undefined) { return true }
            if (datagridObj.datagrid('validateRow', editIndex)) {
                datagridObj.datagrid('endEdit', editIndex);
                editIndex = undefined;
                return true;
            } else {
                return false;
            }
        }

        //Easy UI DataGrid
        function ShowDataGrid(datagrid, title, url, columns, idField, sortName, toolbar, isPage) {
            ShowDataGridAll(datagrid, title, url, true, columns, idField, sortName, toolbar, isPage, null, null, null, null);
        }
        function ShowDataGridAll(datagrid, title, url, isPost, columns, idField, sortName, toolbar, isPage, onAfterEdit, onDblClickRow, onClickRow, onLoadSuccess) {
            $('#' + datagrid).datagrid({
                cache: false,
                title: title,
                pageNumber: 1,
                nowrap: false,
                fit: true,
                url: url,
                method: isPost ? 'post' : 'get',
                sortName: sortName,
                sortOrder: 'desc',
                singleSelect: true,
                idField: idField,
                columns: columns,
                pagination: isPage,
                fitColumns: true,
                rownumbers: true,
                pageList: [20, 30, 50, 100, 200],
                toolbar: toolbar,
                border: false,
                onAfterEdit: function (rowIndex, rowData, changes) {
                    onAfterEdit(rowIndex, rowData, changes);
                },
                onDblClickRow: function (rowIndex, rowData) {
                    onDblClickRow(rowIndex, rowData);
                },
                onClickRow: function (rowIndex, rowData) {
                    onClickRow(rowIndex, rowData);
                },
                onLoadSuccess: function (data) {
                    onLoadSuccess(data);
                }
            });
        }
        //移动行 datagrid-id编号,sortnum-排序字段名称,isUp-是否上移
        function datagridRowMove(datagrid, sortnum, isUp) {
            var obj = $('#' + datagrid);
            var row = obj.datagrid('getSelected');
            var index = obj.datagrid('getRowIndex', row);
            var toup, todown;
            if (isUp) {//上移
                if (index != 0) {
                    toup = obj.datagrid('getData').rows[index];
                    todown = obj.datagrid('getData').rows[index - 1];
                    toup[sortnum] = toup[sortnum] + todown[sortnum];
                    todown[sortnum] = toup[sortnum] - todown[sortnum];
                    toup[sortnum] = toup[sortnum] - todown[sortnum];
                    obj.datagrid('getData').rows[index] = todown;
                    obj.datagrid('getData').rows[index - 1] = toup;
                    obj.datagrid('refreshRow', index);
                    obj.datagrid('refreshRow', index - 1);
                    obj.datagrid('selectRow', index - 1);
                    temprows[toup['id']] = toup;
                    temprows[todown['id']] = todown;
                }
            } else {//下移
                var rows = obj.datagrid('getRows').length;
                if (index != rows - 1) {
                    todown = obj.datagrid('getData').rows[index];
                    toup = obj.datagrid('getData').rows[index + 1];
                    toup[sortnum] = toup[sortnum] + todown[sortnum];
                    todown[sortnum] = toup[sortnum] - todown[sortnum];
                    toup[sortnum] = toup[sortnum] - todown[sortnum];
                    obj.datagrid('getData').rows[index + 1] = todown;
                    obj.datagrid('getData').rows[index] = toup;
                    obj.datagrid('refreshRow', index);
                    obj.datagrid('refreshRow', index + 1);
                    obj.datagrid('selectRow', index + 1);
                    temprows[toup['id']] = toup;
                    temprows[todown['id']] = todown;
                }
            }
            if (rowsArray.contains(JSON.stringify(toup))) {
                temprows[toup['id']] = null;
            }
            if (rowsArray.contains(JSON.stringify(todown))) {
                temprows[todown['id']] = null;
            }
            var arr = [];
            for (var i = 0; i < temprows.length; i++) {
                if (temprows[i] != null) {
                    arr.push(temprows[i]);
                }
            }
            return arr;
        }

        //Array扩展方法 - 判断指定元素值是否存在
        Array.prototype.contains = function (obj) {
            for (var i = 0; i < this.length; i++) {
                if (this[i] == obj) {
                    return true;
                }
            }
            return false;
        } 
    </script>
</head>
<body>
    <h2>DataGrid with 上下移动批量保存数据</h2>
    <p>通过前端变量保存修改数据集合，一次性提交后台执行</p>
    <div style="margin:20px 0;"></div>
    <table id="myDatagridList" class="easyui-datagrid" title="" style="700px;height:250px">
    </table>
</body>
</html>

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/han1982/p/6831458.html