JqGrid 實現本地數據 的 增加 編輯 刪除 功能

客戶:列表的CRUD操作全都在列表裏完成。
我:如果表單的數據量多時,可能使用列表不太方便。
客戶:我們之前的系統都是這樣的。
我:可以先試用一下XXX方式,我覺得XXX方式還是挺多優點的。
客戶:強列要求。
我:。。。。那就幹吧。

因爲修改的過程有遇到太多問題,特此做下筆記。

構思

在這裏插入圖片描述

效果

在這裏插入圖片描述

初始化

 initGrid: function(request) {
                var targetDom = request.layoutElement;
               
                controller.gridInstance = targetDom.find('.material-grid').jqGrid.init( {
                    height: "140",
                    autoencode: true,
                    datatype: function(postData) {
                        var result = [];
                        var __db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
                        result = {
                            pageIndex: postData.page,
                            records: __db.length,
                            result: '1',
                            total: Math.ceil(__db.length / postData.rows),
                            rows: __db
                        };
                        $context.$viewUI.list.jqGrid.setRowsRecord($(this), {
                            records: result,
                            postdata: postData
                        });
                    },
                    gridComplete: function() {
                        $context.$viewUI.list.jqGrid.adjustGridHeight($(this));
                        $(window).bind('resize', function() {
                            $context.$viewUI.jqGrid.resize();
                        });
                    },

                    colNames: ["序號", '零件', '零件名稱', '數量', '價格'],
                    colModel: [{
                            name: 'id',
                            index: 'id',
                            editable: false,
                            sortable: false,
                            hidden: true
                        },
                        {
                            name: 'partNo',
                            index: 'partNo',
                            editable: true,
                            sortable: false,
                            edittype: 'text',
                            editoptions: { class: 'text-center', maxlength: '50' }
                        },
                        {
                            name: 'partName',
                            index: 'partName',
                            editable: true,
                            sortable: false,
                            edittype: 'text',
                            editoptions: { class: 'text-center', maxlength: '50' }
                        },
                        {
                            name: 'qty',
                            index: 'qty',
                            editable: true,
                            sortable: false,
                            edittype: 'text',
                            editoptions: { class: 'text-center', maxlength: '50' }
                        },
                        {
                            name: 'price',
                            index: 'price',
                            editable: true,
                            sortable: false,
                            edittype: 'text',
                            editoptions: { class: 'text-center', maxlength: '50' }
                        },
                    ],
                    viewrecords: false,
                    multiselect: true,
                    pager: false,
                    sortname: 'id',
                    sortorder: "desc",
                    editurl: $context.$config.localDomain + "ZeroClaim/getProjectNo",
                    onSelectRow: function(id) {
                        controller.gridInstance.saveRow(lastrow, false, 'clientArray');
                        controller.gridInstance.jqGrid('restoreRow', lastrow);
                        controller.gridInstance.jqGrid('editRow', id, true);
                        //更新數據
                        controller.updateRow(lastrow);
                        lastrow = id;
                    },
                });
                request.storage.$materialGrid = controller.gridInstance;
            },

這裏主要是JqGrid初始化,
關鍵1:數據源,可以看出這裏的數據源使用的是本地緩存
關鍵2: editurl,這個是數據編碼後,提交的後臺地址。實際上這個屬性還必須有,不然會報錯。但不嚴格,只有有設置,地址能訪問就可以。對於使用本地數據的,這屬性隨意設置即可。

其它的初始化項就不多說了,其本上看jqgrid的用戶文檔可以輕鬆解決。

實現

添加

   addRows: function() {

                ///Jqgrid 的尿性, 編輯列獲取不到數據。獲取數據時,必須得先取消編輯
                
                //1 獲取數據
                var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];

                //2 設置編輯完成
                $(db).each(function() {
                    controller.gridInstance.saveRow(this.id, false, 'clientArray');
                    controller.gridInstance.jqGrid('restoreRow', this.id);
                });
                
                //3 獲取更新
                db = controller.gridInstance.getRowData();

                //4 插入新行
                var rowData = { id: guid() };
                db.push(rowData);

                //5 更新session 並重新加載
                sessionStorage["material_items"] = JSON.stringify(db);
                $context.$viewUI.list.jqGrid.reload(controller.gridInstance);

                //6 新增的一行需要可編輯
                controller.gridInstance.jqGrid('editRow', rowData.id, true, 0);

                //7 記錄當前編輯行狀態
                lastrow=rowData.id;

            },

思路:
1:在db( 本地頁面緩存) 先加一條數據
2:重新加載數據。
3:設置新加的數據爲編輯行。

操作:
如代碼裏的註釋
1: 獲取數據(略)
2: 設置編輯完成,因爲jqgrid的尿性,獲取不到正在編輯的數據。
官方是這麼解釋的(下圖)。那就必須先把編輯的中行,設置成非編輯行。
在這裏插入圖片描述

3: 獲取更新
獲取列表的數據更新到db,保證db的數據是最新的。

4:db添加新的行。新行需要有一個唯一的標識(id)。

5:列表重新加載數據。

6:設置新增行爲可編輯。並記錄當前編輯行。

編輯

代碼如下:

編輯觸發事件,這段代碼在初始化裏。

   onSelectRow: function(id) {

                        controller.gridInstance.saveRow(lastrow, false, 'clientArray');
                        controller.gridInstance.jqGrid('restoreRow', lastrow);
                        controller.gridInstance.jqGrid('editRow', id, true);

                        //更新數據
                        controller.updateRow(lastrow);
                        lastrow = id;


                    },

編輯處理邏輯

 updateRow: function(id) {
                var row = controller.gridInstance.jqGrid('getRowData', id);

                var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
                $(db).each(function() {
                    if (this.id == row.id) {
                        this.partNo = row.partNo;
                        this.partName = row.partName;
                        this.qty = row.qty;
                        this.price = row.price;
                    }
                });

                sessionStorage["material_items"] = JSON.stringify(db);
                // $context.$viewUI.list.jqGrid.reload(controller.gridInstance);
            },

思路:
1:選擇列進入編碼。
2:編輯數據。
3:回車保存。
操作:
1:保存完取消編碼狀態。關鍵是

  controller.gridInstance.saveRow(lastrow, false, 'clientArray');

2:取得編輯行的數據,更新到db。

刪除

 removeRows: function() {

                //獲取選中的id
                var ids = controller.gridInstance.jqGrid('getGridParam', 'selarrrow');
                if (ids.length == 0) {
                    $context.$viewUI.message.show("請選擇要刪除的零件!");
                    return;
                }

                var db = JSON.parse(sessionStorage["material_items"]) || [];
                var ndb = [];
                for (var i = 0; i < db.length; i++) {
                    var deleted = false;
                    for (var j = 0; j < ids.length; j++) {
                        if (ids[j] == db[i].id) {
                            deleted = true;
                            break;
                        }
                    }
                    if (!deleted) {
                        ndb.push(db[i]);
                    }
                }
                sessionStorage["material_items"] = JSON.stringify(ndb);
                controller.gridInstance.trigger("reloadGrid");

            },

思路
1:獲取選中行
2:刪除DB數據
3:重新加載。

操作
與思路高度一致。

總結

感覺Jqgrid挺原始的,很適合做包裝(稍候提供整個代碼)。但也有一些不足。
坑1:當列處於編碼狀態時,獲取不到直實的內存。而是一堆html控件無素。
坑2:初始化提到的editurl 屬性。必填並且可達,不然報錯。建議在同級文件夾建個空的html文件。

模塊組件封裝整個代碼已脫敏。僅供參考。

;
(function(define) {
    'use strict';
    define(function(require, exports, module) {

        function guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                var r = Math.random() * 16 | 0,
                    v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        //用於記錄最後一次編輯的行
        var lastrow;

        var controller = {
            init: function(request) {

                controller.initGrid(request);
                controller.bindAdd(request);
                controller.bindDelete(request);
            },
            //綁定數據網格
            initGrid: function(request) {
                var targetDom = request.layoutElement;
               
                controller.gridInstance = targetDom.find('.material-grid').jqGrid.init( {
                    height: "140",
                    autoencode: true,

                    datatype: function(postData) {
                        var result = [];
                        var __db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
                        result = {
                            pageIndex: postData.page,
                            records: __db.length,
                            result: '1',
                            total: Math.ceil(__db.length / postData.rows),
                            rows: __db
                        };
                        $context.$viewUI.list.jqGrid.setRowsRecord($(this), {
                            records: result,
                            postdata: postData
                        });
                    },
                    gridComplete: function() {
                        $context.$viewUI.list.jqGrid.adjustGridHeight($(this));
                        $(window).bind('resize', function() {
                            $context.$viewUI.jqGrid.resize();
                        });
                    },

                    colNames: ["序號", '零件', '零件名稱', '數量', '價格'],
                    colModel: [{
                            name: 'id',
                            index: 'id',
                            editable: false,
                            sortable: false,
                            hidden: true
                        },
                        {
                            name: 'partNo',
                            index: 'partNo',
                            editable: true,
                            sortable: false,
                            edittype: 'text',
                            editoptions: { class: 'text-center', maxlength: '50' }
                        },
                        {
                            name: 'partName',
                            index: 'partName',
                            editable: true,
                            sortable: false,
                            edittype: 'text',
                            editoptions: { class: 'text-center', maxlength: '50' }
                        },
                        {
                            name: 'qty',
                            index: 'qty',
                            editable: true,
                            sortable: false,
                            edittype: 'text',
                            editoptions: { class: 'text-center', maxlength: '50' }
                        },
                        {
                            name: 'price',
                            index: 'price',
                            editable: true,
                            sortable: false,
                            edittype: 'text',
                            editoptions: { class: 'text-center', maxlength: '50' }
                        },
                    ],
                    viewrecords: false,
                    multiselect: true,
                    pager: false,
                    sortname: 'id',
                    sortorder: "desc",
                    editurl:  "ZeroClaim/getProjectNo",
                    onSelectRow: function(id) {

                        controller.gridInstance.saveRow(lastrow, false, 'clientArray');
                        controller.gridInstance.jqGrid('restoreRow', lastrow);
                        controller.gridInstance.jqGrid('editRow', id, true);

                        //更新數據
                        controller.updateRow(lastrow);
                        lastrow = id;


                    },

                });

            },

            updateRow: function(id) {
                var row = controller.gridInstance.jqGrid('getRowData', id);

                var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
                $(db).each(function() {
                    if (this.id == row.id) {
                        this.partNo = row.partNo;
                        this.partName = row.partName;
                        this.qty = row.qty;
                        this.price = row.price;
                    }
                });

                sessionStorage["material_items"] = JSON.stringify(db);
            },
            addRows: function() {

                ///Jqgrid 的尿性, 編輯列獲取不到數據。獲取數據時,必須得先取消編輯

                //1 獲取數據
                var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];

                //2 設置編輯完成
                $(db).each(function() {
                    controller.gridInstance.saveRow(this.id, false, 'clientArray');
                    controller.gridInstance.jqGrid('restoreRow', this.id);
                });

                //3 獲取更新
                db = controller.gridInstance.getRowData();

                //4 插入新行
                var rowData = { id: guid() };
                db.push(rowData);

                //5 更新session 並重新加載
                sessionStorage["material_items"] = JSON.stringify(db);
                $context.$viewUI.list.jqGrid.reload(controller.gridInstance);

                //6 新增的一行需要可編輯
                controller.gridInstance.jqGrid('editRow', rowData.id, true, 0);

                //7 記錄當前編輯行狀態
                lastrow=rowData.id;

            },
            removeRows: function() {

                //獲取選中的id
                var ids = controller.gridInstance.jqGrid('getGridParam', 'selarrrow');
                if (ids.length == 0) {
                    alert("請選擇要刪除的數據!");
                    return;
                }

                var db = JSON.parse(sessionStorage["material_items"]) || [];
                var ndb = [];
                for (var i = 0; i < db.length; i++) {
                    var deleted = false;
                    for (var j = 0; j < ids.length; j++) {
                        if (ids[j] == db[i].id) {
                            deleted = true;
                            break;
                        }
                    }
                    if (!deleted) {
                        ndb.push(db[i]);
                    }
                }
                sessionStorage["material_items"] = JSON.stringify(ndb);
                controller.gridInstance.trigger("reloadGrid");

            },

            complateEdit: function() {
                var db = sessionStorage["material_items"] ? JSON.parse(sessionStorage["material_items"]) : [];
                //2 設置編輯完成
                $(db).each(function() {
                    controller.gridInstance.saveRow(this.id, false, 'clientArray');
                    controller.gridInstance.jqGrid('restoreRow', this.id);
                });

                //更新db
                db = controller.gridInstance.getRowData();
                sessionStorage["material_items"] = JSON.stringify(db);
            },

            bindAdd: function(request) {
                var targetDom = request;

                targetDom.find(".btn_material_add").bind("click", function() {
                    controller.addRows();
                });
            },
            bindDelete: function(request) {
                var targetDom = request;
                targetDom.find('.btn_material_delete').bind("click", function() {
                    controller.removeRows();
                })
            }
        };
        module.exports = controller;
    });
})(define);

參考: https://blog.mn886.net/jqGrid/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章