JqGrid行编辑功能重写

Richy Liu

于 2020-05-17 17:12:12 发布

阅读量868

点赞数 2

分类专栏：前端文章标签： jquery jqgrid

本文链接：https://blog.csdn.net/richyliu44/article/details/106175656

版权

本文档介绍了如何重写JqGrid的行编辑功能，以实现实时编辑提交和自定义回车、Esc键响应。作者首先吐槽了JqGrid的使用体验，然后详细讲解了去除原码中的enter和esc键事件，以及如何注入新的键盘事件处理。最后，提供了整个逻辑代码，并强调了代码的模块化和可扩展性。

摘要由CSDN通过智能技术生成

JqGrid行编辑功能重写

序

最近使用JqGrid，真是被折腾得死去活来。
在这里插入图片描述
说实话jqgrid真的不好用，文档做得不好不说，功能也是做得相当难用。如果可以重来，我要选李白。。好了，吐槽归吐槽。团队还等着Demo干活呢。。

实现思维

之前写过一篇实现jqgrid 增删查改功能的，其中修改也是通过编辑行的方式的，使用的是本地缓存数据库。传送门
本文要实现的是
1：实时编辑完实时提交数据。
2：重写JqGrid的回车，Esc事件。既然那么难用，那就自已实现一套吧。

为什么要重写JqGrid的回车，Esc事件？
1：编辑状态下，按回车，自动提交。按Esc，自动取消保存。
在保存的过程中：保存前，保存处理，保存后处理都无从插入。
2：提交数据的方式写得太死，很难符合使用需求，参考editoption配置。

重写

一：JqGrid 原码修改：去掉enter，esc键响应事件。

：找到editRow方法。

2：注释事件，在 回车 与 Esc 事件的响应直接返回。

二：Enter,Esc事件注入。

    $(controller.gridSelector).keyup(function(ev) {
   

                    if (ev.keyCode == 13 && controller.lastrow) {
   
                        if (controller.eidtable) {
   
                            //有未完成的编辑
                            if (controller.lastrow) {
   
                                controller.gridInstance.saveRow(controller.lastrow, false, 'clientArray');
                                controller.gridInstance.jqGrid('restoreRow', controller.lastrow);
                                //更行数据
                                if (controller.updateRow(controller.lastrow)) {
   
                                    //成功
                                    controller.gridInstance.trigger("reloadGrid");
                                } else {
    //失败
                                    controller.gridInstance.jqGrid('editRow', controller.lastrow, true);
                                    return;
                                }
                            }
                            // controller.gridInstance.jqGrid('editRow', id, true);
                        }
                    } else if (ev.keyCode == 27 && controller.lastrow) {
   
                        controller.gridInstance.jqGrid('restoreRow', controller.lastrow);
                        controller.lastrow = '';//清除编辑状态
                        alert("取消");
                    }
                });

逻辑见注释。

整个逻辑代码

包括新增，删除，编辑等实现。
Grid的整个实现是模块化的，非常好扩展与封装。
我在需要根据不同业务个性化的地方加上了注释。方便阅读与使用。


;
(function(define) {
   
    'use strict';
    define(function(require, exports, module) {
   
        var context = $context;

        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);
            });
        }

        //定自定义控件
        function cus_eidt_num(value, options) {
   
            var html = '<input type="number" data-decimals="2" value="" maxlength="10" max="999999999" min="0" class="form-control" />';
            var t = $(html);
            t.val(value);
            return $(t);
        }

        //定自定义控件 赋值 
        function cus_eidt_num_value(elem, operation, value) {
   

            if (operation === 'get') {
   
                return $(elem).val();
            } else if (operation === 'set') {
   
                $(elem).val(value);
            }
        }

        var controller = {
   

            gridSelector: '.grid-area', //列表绑定的对象
            gridInstance: {
   },
            lastro