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 ...
随机推荐
- Angular2 表单（一） 用户输入
绑定到用户输入事件 等号左边的 (click) 表示把按钮的点击事件作为绑定目标. 等号右边引号中的文本是模板语句,通过调用组件的 onClickMe 方法来响应这个点击事件. <button ...
- Android无线测试之—UiAutomator UiScrollable API介绍六
向前与向后滚动API 一.向前与向后滚动相关API 返回值 API 描述 boolean scrollBackward(int steps) 自动以步长向后滑动 boolean scrollBackw ...
- iOS开发经验总结（一）
本文转载至 :http://dreamahui.iteye.com/blog/1878650 软件开发方面 1. 在每个页面的入口和出口(一般是viewDidLoad和dealloc)打上日志,可以 ...
- Fiddler实现手机抓包——小白入门 - 做一个不动声色的大人
手机用fiddler抓包 电脑最好是笔记本,这样能和手机保持统一局域网内:其他不多说,直接说步骤了. 一.对PC(笔记本)参数进行配置 1. 配置fiddler允许监听到https(fiddle ...
- 最受欢迎的五大BUG管理系统
五大最受欢迎的BUG管理系统 Google在中国大*陆遭遇变故做出暂时性的退出大*陆市场,也使很多忠实的用户受到小小的挫折,以本公司为例,原本的BUG都是记录在google的EXCEL在线文档中 ...
- .net Session延长过期时间
一.全局网站(即服务器)级 IIS-网站-属性-Asp.net-编辑配置-状态管理-会话超时(分钟)-设置为120,即为2小时,即120分钟后如果当前用户没有操作,那么Session就会自动过期. 二 ...
- 【BZOJ2500】幸福的道路 树形DP+RMQ+双指针法
[BZOJ2500]幸福的道路 Description 小T与小L终于决定走在一起,他们不想浪费在一起的每一分每一秒,所以他们决定每天早上一同晨练来享受在一起的时光. 他们画出了晨练路线的草图,眼尖的 ...
- ios 去掉UITableView Group形式下面的白色阴影
初始化的时候 设置_tableView.separatorStyle = UITableViewCellSeparatorStrleNone;
- 160530、memcached集群（spring集成的配置）
第一步:在linux机或windows机上安装memcached服务端(server) linux中安装memcached:centos中命令 yum -y install memcached 如果没 ...
- CentOS设置密码复杂度及过期时间等
我们在使用linux系统设置密码的时候,经常遇到这样的问题,系统提示:您的密码太简单,或者您的密码是字典的一部分.那么系统是如何实现对用户的密码的复杂度的检查的呢? 系统对密码的控制是有两部分(我知道 ...