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 ...
随机推荐
- DecimalFormat 四舍五入Float类型的坑
今天又踩了一个坑,使用DecimalFormat来完毕四舍五入.可是传入的是float类型,几轮測试才发现一个问题,传入的float会被转为double类型.大家都知道float是4位,double是 ...
- Spring.NET学习笔记——目录(原)
目录 前言 Spring.NET学习笔记——前言 第一阶段:控制反转与依赖注入IoC&DI Spring.NET学习笔记1——控制反转(基础篇) Level 200 Spring.NET学习笔 ...
- awk sed grep 详解
Linux的文本处理工具浅谈 awk [功能说明] 用于文本处理的语言(取行,过滤),支持正则 NR代表行数,$n取某一列,$NF最后一列 NR==20,NR==30 从20行到30行 FS竖着切,列 ...
- Location 对象的assign()和replace()有什么区别？
window.location.assign(url) : 加载 URL 指定的新的 HTML 文档. 就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面. w ...
- Maven的使用入门
0.什么是maven? 它是一个软件开发管理工具,主要管理工作是:依赖管理,项目一键构建 1.我们为什么要使用maven? 使用maven构建的项目不包含jar包文件,所以整个项目的体积非常小 mav ...
- js 中 this 的指向问题
高程上的大前提: 1.this 对象是在运行时基于函数的执行环境绑定的:在全局函数中,this 等于window,而当函数被作为某个对象的方法调用时,this 等于那个对象:不过,匿名函数的执行环境具 ...
- [ Office 365 开发系列 ] Graph Service
前言 本文完全原创,转载请说明出处,希望对大家有用. 通过[ Office 365 开发系列 ] 开发模式分析和[ Office 365 开发系列 ] 身份认证两篇内容的了解,我们可以开始使用Offi ...
- Dart异步与消息循环机制
Dart与消息循环机制 翻译自https://www.dartlang.org/articles/event-loop/ 异步任务在Dart中随处可见,例如许多库的方法调用都会返回Future对象来实 ...
- Servlet------>jsp自定义标签（JSPTAG接口）
TagSupport实现类里不只实现了tag接口,还有tag接口的子接口,也就是IterationTag子接口中增加了doAfterBody()方法和EVAL_BODY_AGAIN常量,为了实现标签体 ...
- FW: linux screen -recorder by ffcast convert
fcast -s ffmpeg -r 20 -vcodec huffyuv out.avi 上面的命令会让你选择一个要录制的区域,然后呢,就会你就可以操作了,操作完后退回去按 q 键退出结束.如果你想 ...