JqGrid 实现本地数据的增加编辑删除功能

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/

JqGrid 实现本地数据的增加编辑删除功能

JqGrid 笔记

序

构思

效果

初始化

实现

添加

编辑

删除

总结

測試編譯機又雙叒叕不能編譯了

一篇文章快速搞懂Java對象創建與銷燬

Jquery $轉換的問題

吐血整理和分享 MySql索引原理與優化

IDEA 代碼分析工具

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

JqGrid 实现本地数据 的 增加 编辑 删除 功能

JqGrid 笔记

序

构思

效果

初始化

实现

添加

编辑

删除

总结

JqGrid 实现本地数据的增加编辑删除功能