Jquery Easy UI Datagrid 上下移動批量保存數據

時間 2019-12-06

標籤 jquery easy datagrid 上下移動批量保存數據欄目 JQuery 简体版

原文原文鏈接

DataGrid with 上下移動批量保存數據

經過前端變量保存修改數據集合，一次性提交後臺執行javascript

本想結合easyui 自帶的$('#dg').datagrid('getChanges'); 方法來保存上下移動修改的數據，但實踐過程當中，發現js arry數組屬於引用傳遞值，碰到一些問題，因爲此次時間緊，不得已本身建立了數組，css

單獨實現了上下移動後的數據，只篩選出修改過的行，點保存的時候一次性發送給後臺處理。等下次有時間再細優化下本次代碼，最終要結合getChanges混合使用。代碼草亂忘讀者勿噴，有對easyui熟悉的朋友能夠一塊兒探討下。很少說了，直接上代碼。html

提示：下載easyui1.52官方包解壓，jquery-easyui-1.5.2\demo\datagrid目錄下建立datagrid_data3.json和simpletoolbar-上下移動.html文件。前端

datagrid_data3.json：java

{"total":10,"rows":[
    {"id": 1,"name": "test1","sortnum": 1},
    {"id": 2,"name": "test2","sortnum": 2},
    {"id": 3,"name": "test3","sortnum": 3},
    {"id": 4,"name": "test4","sortnum": 4},
    {"id": 5,"name": "test5","sortnum": 5},
    {"id": 6,"name": "test6","sortnum": 6},
    {"id": 7,"name": "test7","sortnum": 7},
    {"id": 8,"name": "test8","sortnum": 8},
    {"id": 9,"name": "test9","sortnum": 9},
    {"id": 10,"name": "test10","sortnum": 10}
]}

simpletoolbar-上下移動.html：jquery

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