Jquery Easy UI Datagrid 上下移动批量保存数据
生活随笔
收集整理的這篇文章主要介紹了
Jquery Easy UI Datagrid 上下移动批量保存数据
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
DataGrid with 上下移動批量保存數據
通過前端變量保存修改數據集合，一次性提交后臺執行
本想結合easyui 自帶的$('#dg').datagrid('getChanges'); 方法來保存上下移動修改的數據，但實踐過程中，發現js arry數組屬于引用傳遞值，碰到一些問題，由于這次時間緊，不得已自己創建了數組，
單獨實現了上下移動后的數據，只篩選出修改過的行，點保存的時候一次性發送給后臺處理。等下次有時間再細優化下本次代碼，最終要結合getChanges混合使用。代碼草亂忘讀者勿噴，有對easyui熟悉的朋友可以一起探討下。不多說了，直接上代碼。
?
提示：下載easyui1.52官方包解壓，jquery-easyui-1.5.2\demo\datagrid目錄下 創建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: '編號', width: 30 },{ field: 'name', title: '名稱', width: 30 },{ field: 'sortnum', title: '排序', width: 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 DataGridfunction 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="width:700px;height:250px"></table> </body> </html>?
轉載于:https://www.cnblogs.com/han1982/p/6831458.html
總結
以上是生活随笔為你收集整理的Jquery Easy UI Datagrid 上下移动批量保存数据的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js简单手动（自动）切换
- 下一篇： 5月9号