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 ...
随机推荐
- Spring_day03--课程安排_基于aspectj的注解aop_Spring的jdbcTemplate操作
Spring_day03 上节内容回顾 今天内容介绍 基于aspectj的注解aop Spring的jdbcTemplate操作 增加 修改 删除 查询 Spring配置c3p0连接池和dao使用jd ...
- 在Eclipse中显示.project和.classpath和.setting目录
在Eclipse中显示.project, .classpath, .gitignore文件和.setting文件夹 在Eclipse中使用git,并显示.gitigonre文件,进行项目管理 在Ecl ...
- IE edge是怎么了？？
IE edge 怎么不能通过$.getJSON(url,function(data){ alert(''); });获取数据呢?,其他浏览器和IE的10以下版本都没问题获取到了,这是什么情况!本来是想 ...
- Hadoop伪分布安装详解(四)
目录: 1.修改主机名和用户名 2.配置静态IP地址 3.配置SSH无密码连接 4.安装JDK1.7 5.配置Hadoop 6.安装Mysql 7.安装Hive 8.安装Hbase 9.安装Sqoop ...
- 【转】通过ionice和nice降低shell脚本运行的优先级
对于一些运行时会造成系统满载的脚本, 例如数据库备份, 会影响当时其他服务的响应速度, 可以通过ionice和nice对其IO优先级和CPU优先级进行调整例如降低"/usr/local/bi ...
- Mustache 中的html转义问题处理
避免在使用Mustache引擎是发生html字符转义 1,模板代码示例: var xml= " <?xml version="1.0" encoding=&q ...
- js Ajax 跨域请求
一.使用jsonp的方式(只支持get请求) 二.使用cors的方式(支持HTTP的大部分请求方式) 三.apache的转发(修改服务器配置) 没有试验,暂时不详细写!
- ubuntu安装Jenkins指导
乌班图安装Jenkins指导 安装Java :apt install default-jre 参考:https://www.cnblogs.com/xionggeclub/p/7117004.html ...
- 如何让thrift0.9.2 在macos上面编译通过？
为将来跨语言通信预研,选择了thrift来试试.结果在mac os上面安装遇到种种困难,不知道是我选择方法错误还是咋的,不管怎样,总算是编译过去了. 首先,我们来参考官网的安装步骤:https://t ...
- NoSQL文章
MongoDB Bugsnag的MongoDB分片集群使用经验