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 ...
随机推荐
- AWS系列-使用Could Events定时对EC2打快照
第1章 使用Could Events定时对EC2打快照 1.1 打开控制台搜索CloudWatch 在搜索栏输入CloudWatch,点击进入CloudWatch控制台 1.2 选择进入Events ...
- android classloader双亲托付模式
概述 ClassLoader的双亲托付模式:classloader 按级别分为三个级别:最上级 : bootstrap classLoader(根类载入器) : 中间级:extension class ...
- ubuntu安装mysql-python
1.首先你要确定ubuntu更新源能用.以下的源适合13.X和14.X,低版本号的ubuntu没试过.毕竟劳资不是測试人员. 为了安全起见 cp /etc/apt/source.list /etc/a ...
- ios开发之--swift下Alamofire的使用
1,首先使用cocoapods导入,如果有不会的同学,可以去看我写的关于cocopods使用的那篇博客 2,直接上代码: a 先看下文件结构 CommonFile.swift import UIKit ...
- swift - UIView 设置背景色和背景图片
代码如下: let page = UIView() page.frame = self.view.bounds //直接设置颜色 page.backgroundColor = UIColor.gree ...
- Invalid property 'driverClassName' of bean class [com.mchange.v2.c3p0.ComboPooledDataSource]
spring配置文件中配置c3p0错误,错误原因在于c3p0连接池与DBCP连接池在驱动.连接.数据库用户名这些属性名称的差别
- Android之布局属性归纳
第一类:属性值为true或falseandroid:layout_centerHrizontal 水平居中android:layout_centerVertical 垂直居中android:layou ...
- Dubbo+Zookeeper视频教程
http://www.roncoo.com/course/view/f614343765bc4aac8597c6d8b38f06fd#boxTwo
- linux安装yaf（ubuntu教程）
$PHP_BIN/phpize 这个是什么 其实这个是一个扩展 apt-get install php5-dev 这样电脑会帮你自己配置了,很简单的下面我们就下载扩展包了http://pecl.php ...
- Memcached 之 .NET（C#）实例分析
一:Memcached的安装 step1. 下载memcache(http://jehiah.cz/projects/memcached-win32)的windows稳定版(这里我下载了memcach ...