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":,"rows":[
{"id": ,"name": "test1","sortnum": },
{"id": ,"name": "test2","sortnum": },
{"id": ,"name": "test3","sortnum": },
{"id": ,"name": "test4","sortnum": },
{"id": ,"name": "test5","sortnum": },
{"id": ,"name": "test6","sortnum": },
{"id": ,"name": "test7","sortnum": },
{"id": ,"name": "test8","sortnum": },
{"id": ,"name": "test9","sortnum": },
{"id": ,"name": "test10","sortnum": }
]}
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 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="width:700px;height:250px">
</table>
</body>
</html>
Jquery Easy UI Datagrid 上下移动批量保存数据的更多相关文章
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- JQuery Easy Ui dataGrid 数据表格 -->转
转至: http://www.cnblogs.com/cnjava/archive/2013/01/21/2869876.html#events 数据表格 - DataGrid 内容 概况 使用方法 ...
- 玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互
最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互 使用Json,首先需要导入一些jar包,这些资源可以在网上下载到 ...
- JQuery Easy Ui dataGrid 数据表格
数据表格 - DataGrid 英文文档:http://www.jeasyui.com/documentation/index.php# 继承$.fn.panel.defaults,使用$.fn.da ...
- jquery Easy UI Datagrid(数据网格)学习心德，附API
第一步,引入主要的css样式和js文件 <meta http-equiv="Content-Type" content="text/html; charset=ut ...
- JQuery Easy Ui DataGrid
Extend from $.fn.panel.defaults. Override defaults with $.fn.datagrid.defaults. The datagrid display ...
- Jquery easy ui datagrid動態加載列問題
1.如下图效果是当选择不同的日期范围时datagrid则会加载出对应的列数
- jquery easy ui datagrid中遇到的坑爹的問題。。。
; //修改 function Update() { //獲取選中行 var selected = $("#dg1").datagrid('getSelected'); //判斷是 ...
- easy ui datagrid 获取选中行的数据
取得选中行数据: var row = $('#tt').datagrid('getSelected'); if (row){ alert('Item ID:'+row.itemid+" Pr ...
随机推荐
- stringstream类操作字符串流
C++ Code 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 ...
- cocos2dx热更新tmx的一个坑
游戏项目中使用了tmx地图,当对tmx文件进行热更新时,进入该地图总是宕机,纠结了几小时终于发现,cocos读取tmx文件时,会默认tmx关联的图集文件和tmx在同一目录,然而那个图集文件并没有在热更 ...
- 本地存储数据库indexedDB实现离线预览的功能
今天在学习<高级JS编程>,看到离线存储,cookie和session都十分的熟悉,但是书中还提到了indexedDB和webSQL(已废弃),indexedDB可以像mysql一样建表, ...
- 【深入Java虚拟机】之二：Class类文件结构
平台无关性 Java是与平台无关的语言,这得益于Java源代码编译后生成的存储字节码的文件,即Class文件,以及Java虚拟机的实现.不仅使用Java编译器可以把Java代码编译成存储字节码的Cla ...
- ndarray 布尔类型矩阵中统计Ture 的次数
对象:NumPy数组或矩阵,eg. data的元素为True和False numpy.sum(data) #统计data中True的个数numpy.count_nonzero(data) #统计dat ...
- ex1. 二维数组中的查找
- [libwww-perl]——POST方法的使用
libwww-perl是我在学习varnish的时候遇到的一个工具. 具体libwww-perl是干什么的,可以参考官网https://github.com/libwww-perl/libwww-pe ...
- MySQL的system命令在渗透测试中的使用以及UDF提权
声明:下面引用关于SYSTEM的东西是自己之前的内容,是自己没有研究透导致的错误结论:有了错就要改,做技术的不能弄虚作假,时时刻刻要求自己要谨慎,虽然我的博客没人看,但是也要向所有已经看到的人道歉,错 ...
- ORA-00845 MEMORY_TARGET not supported on this system解决办法
ORA-00845: MEMORY_TARGET not supported on this system报错解决 Oracle 11g数据库修改pfile参数后启动数据库报错ora-00845 SQ ...
- 『AngularJS』一点小小的理解
AngularJS 是一个前端的以Javascript为主的MVC框架.与AngularJS相类似的还有EmberJS. 随着时代在进步,各种各样的开发理念与开发框架不断的提出与发展,而就目前来说,除 ...