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>
