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 ...

随机推荐

Maven项目POM.xml详解
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...
常用快捷键—Webstorm入门指南
提高代码编写效率,离不开快捷键的使用,Webstorm拥有丰富的代码快速编辑功能,你可以自由配置功能快捷键. 快捷键配置点击“File”-> “settings” Webstorm预置了其他编 ...
sql列转行查询
test表: 执行列转行sql: select student, sum(case Course when '语文' then Score else null end) 语文, sum(case Co ...
如何访问局域网的Access数据库？
1]用共享打印机来打开文件共享, 2]把Access文件.mdb所在的文件夹共享,然后其他的就和本地一样了. 设置如下: Data Source="\\192.168.7.49\user\ ...
自动交互式脚本--expect
我们经常会遇到一些需要与服务器程序打交道的场景,比如,从登陆某个服务器,然后进行某项工作.这很平常,但是如果把这个工作自动化进行,你就需要一个程序能自动做你要告诉机器的事情,这样,我们的expect就 ...
[SCOI2010]字符串
思路: 设1为向(1,1)方向走,0为向(1,-1)方向走.那么题意可转化为从(0,0)走到(n+m,n-m)且不能跨过y=0的方案数.总方案数C(n+m,n),然后要减去不合法的即线路通过y=-1的 ...
【BZOJ2525】[Poi2011]Dynamite 二分+树形DP
[BZOJ2525][Poi2011]Dynamite Description Byteotian Cave的结构是一棵N个节点的树,其中某些点上面已经安置了炸.药,现在需要点燃M个点上的引线引爆所有 ...
css calc()
w https://developer.mozilla.org/en-US/docs/Web/CSS/calc The calc() CSS function can be used anywhere ...
mysql5.7.22在centos7.5下的安装
1.下载,解压把下载的文件放到 /app/programs/目录下 tar -zxvf mysql-5.7.22-linux-glibc2.12-x86_64.tar.gz 地址:https://d ...
Python多股票同周期可视化
import warnings warnings.filterwarnings("ignore") import numpy as np import pandas as pd i ...

Jquery Easy UI Datagrid 上下移动批量保存数据

DataGrid with 上下移动批量保存数据

Jquery Easy UI Datagrid 上下移动批量保存数据的更多相关文章

随机推荐

热门专题