JqGrid行编辑 功能重写

2023-11-02 00:30
文章标签 功能 重写 编辑 jqgrid

本文主要是介绍JqGrid行编辑 功能重写，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JqGrid行编辑 功能重写

      • 序
      • 实现思维
      • 重写
        • 一：JqGrid 原码修改：去掉enter，esc键响应事件。
        • 二：Enter,Esc事件注入。
        • 整个逻辑代码
      • 效果

序

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

实现思维

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

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

重写

一：JqGrid 原码修改：去掉enter，esc键响应事件。
  1. ：找到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: {},lastrow: "",edigFlag: false,eidtable: true,init: function(request, param) {controller.initGrid(request);controller.bindAdd(request);controller.bindDelete(request);/** 搜索*/request.layoutElement.find(".btn-op-gridComponent-search").click(function() {$context.$viewUI.list.jqGrid.reload($(controller.gridInstance));});/** 重置*/request.layoutElement.find(".btn-op-gridComponent-search-reset").click(function() {var areaDom = request.layoutElement.find('.search-area');var obj = $context.$viewUI.form.setSimpleFormData(areaDom, {});}, );},initGrid: function(request) {var targetDom = request.layoutElement;controller.gridInstance = $context.$viewUI.list.jqGrid.init(targetDom.find(controller.gridSelector), {height: "140",autoencode: true,datatype: function(postData) {var self = this;var areaDom = request.layoutElement.find('.search-area');var obj = JSON.parse(JSON.stringify($context.$viewUI.form.getSimpleFormData(areaDom), function(a, b) {return typeof b === 'string' ? b.trim() : b}));obj.pageSize = postData.rows;obj.pageIndex = postData.page;/** 查询数据，后端接口路径window.$context.$config.localDomain + 'issuecode/getpage'*/window.$context.$sys.net.ajax('get', obj, window.$context.$config.localDomain +'issuecode/getpage',function(data) {window.$context.$sys.net.resultAnalyseForAjax(data, function(analyseResult) {if (analyseResult.success) {$context.$viewUI.list.jqGrid.setRowsRecord($(self), {records: analyseResult.data,postdata: postData}, {jsonReader: {total: 'total'}});} else {if (analyseResult.message) {window.$context.$viewUI.message.showMessageWithCloseButton(analyseResult.message);}}});});},gridComplete: function() {$context.$viewUI.list.jqGrid.adjustGridHeight($(this));$(window).bind('resize', function() {$context.$viewUI.jqGrid.resize();});controller.lastrow = ''; //重新加载清空编码状态},/*** 需要自定义 */colNames: ['id','所在模块', '一级分类', '二级分类', '三级分类', '问题代码', '问题描述', '创建时间', '创建人', '最后更新时间', '最后修改人'],colModel: [{name: 'id',index: 'id',hidden: true},{name: 'model',index: 'model',sortable: false,editable: true,width: '10%'},{name: 'firstLevelSort',index: 'firstLevelSort',editable: true,sortable: false,width: '10%'},{name: 'secondLevelSort',index: 'secondLevelSort',editable: true,sortable: false,width: '10%'},{name: 'threeLevelSort',index: 'threeLevelSort',editable: true,sortable: false,width: '10%'},{name: 'issueCode',index: 'issueCode',editable: true,sortable: false,width: '10%',editoptions: {class: 'text-center',maxlength: '50'}},{name: 'remark',index: 'remark',editable: true,sortable: false,width: '10%'},{name: 'createdDate',index: 'createdDate',sortable: false,width: '15%'},{name: 'creator',index: 'creator',sortable: false,width: '10%'},{name: 'lastUpdatedDate',index: 'lastUpdatedDate',sortable: true,width: '15%'},{name: 'modifier',index: 'modifier',sortable: false,width: '10%'}],viewrecords: false,multiselect: true,pager: false,sortname: 'id',sortorder: "desc",loadonce: true,onSelectRow: function(id) {controller.onSelectRow(id);},});//马勒戈壁，劳资跟你干上了。//添加 esc键与enter键事件捕捉$(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("取消");}});},onSelectRow: function(id) {if (controller.eidtable) {//有未完成的编辑if (controller.lastrow) {//选择与编辑是同一行if (controller.lastrow == id) return;controller.gridInstance.saveRow(controller.lastrow, false, 'clientArray');controller.gridInstance.jqGrid('restoreRow', controller.lastrow);//更行数据if (controller.updateRow(controller.lastrow)) {//成功} else { //失败controller.gridInstance.jqGrid('editRow', controller.lastrow, true);return;}}controller.gridInstance.jqGrid('editRow', id, true);controller.lastrow = id;}},addRows: function() {if (controller.lastrow) {$context.$viewUI.message.show('请完成当成编辑再添加');return;}//插入新列 /*** 需要自定义 */var rowData = {id: guid(),model: ''};controller.gridInstance.jqGrid('addRowData', rowData.id, rowData, 0);//新增的一行需要可编辑controller.onSelectRow(rowData.id);},updateRow: function(id) {var row = controller.gridInstance.jqGrid('getRowData', id);//校验/*** 需要自定义 */if (!row.model) {$context.$viewUI.message.show('模块不能为空');return false;}var url = $context.$config.localDomain + "issuecode/update";var isSucess = false;var context = window.$context;var token = context.$api.auth.getToken(context);$.ajax({type: "POST",async: false,url: url,headers: {Authorization: token},data: JSON.stringify(row),contentType: "application/json",success: function(data) {if (data && data.result == "1") {isSucess = true;controller.lastrow = ""; //清除lastrowcontext.$viewUI.blocker.showTip({message: data.msg});} else {isSucess = false;$context.$viewUI.message.show(data.msg);}},error: function(data) {$context.$viewUI.message.show(data);isSucess = false;}});return isSucess;},removeRows: function() {//获取选中的idvar ids = controller.gridInstance.jqGrid('getGridParam', 'selarrrow');if (ids.length == 0) {$context.$viewUI.message.show("请选择要删除的记录！");return;}$context.$viewUI.message.show("删除");//删除动作自己写/*** 需要自定义 */controller.gridInstance.trigger("reloadGrid");},bindAdd: function(request) {var targetDom = request.layoutElement;targetDom.find(".btn-priod-add").bind("click", function() {controller.addRows();});},bindEdit: function(request) {var targetDom = request.layoutElement;targetDom.find(".btn-priod-edit").bind("click", function() {// controller.addRows();});},bindDelete: function(request) {var targetDom = request.layoutElement;targetDom.find(".btn-period-del").bind("click", function() {controller.removeRows();});}}module.exports = controller;});
})(define);

效果

在这里插入图片描述

这篇关于JqGrid行编辑 功能重写的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/326860。

相关文章

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
Spring+MyBatis+jeasyui 功能树列表

Spring+MyBatis+jeasyui 功能树列表

java代码@EnablePaging@RequestMapping(value = "/queryFunctionList.html")@ResponseBodypublic Map<String, Object> queryFunctionList() {String parentId = "";List<FunctionDisplay> tables = query(parent
阅读更多...
PostgreSQL核心功能特性与使用领域及场景分析

PostgreSQL核心功能特性与使用领域及场景分析

PostgreSQL有什么优点？ 开源和免费 PostgreSQL是一个开源的数据库管理系统，可以免费使用和修改。这降低了企业的成本，并为开发者提供了一个活跃的社区和丰富的资源。 高度兼容 PostgreSQL支持多种操作系统（如Linux、Windows、macOS等）和编程语言（如C、C++、Java、Python、Ruby等），并提供了多种接口（如JDBC、ODBC、ADO.NET等
阅读更多...
寻迹模块TCRT5000的应用原理和功能实现（基于STM32）

寻迹模块TCRT5000的应用原理和功能实现（基于STM32）

目录 概述 1 认识TCRT5000 1.1 模块介绍 1.2 电气特性 2 系统应用 2.1 系统架构 2.2 STM32Cube创建工程 3 功能实现 3.1 代码实现 3.2 源代码文件 4 功能测试 4.1 检测黑线状态 4.2 未检测黑线状态 概述 本文主要介绍TCRT5000模块的使用原理，包括该模块的硬件实现方式，电路实现原理，还使用STM32类
阅读更多...
nginx介绍及常用功能

nginx介绍及常用功能

什么是nginx nginx跟Apache一样，是一个web服务器（网站服务器），通过HTTP协议提供各种网络服务。 Apache：重量级的，不支持高并发的服务器。在Apache上运行数以万计的并发访问，会导致服务器消耗大量内存。操作系统对其进行进程或线程间的切换也消耗了大量的CPU资源，导致HTTP请求的平均响应速度降低。这些都决定了Apache不可能成为高性能WEB服务器  nginx：
阅读更多...
PDF 软件如何帮助您编辑、转换和保护文件。

PDF 软件如何帮助您编辑、转换和保护文件。

如何找到最好的 PDF 编辑器。 无论您是在为您的企业寻找更高效的 PDF 解决方案，还是尝试组织和编辑主文档，PDF 编辑器都可以在一个地方提供您需要的所有工具。市面上有很多 PDF 编辑器 — 在决定哪个最适合您时，请考虑这些因素。 1. 确定您的 PDF 文档软件需求。 不同的 PDF 文档软件程序可以具有不同的功能，因此在决定哪个是最适合您的 PDF 软件之前，请花点时间评估您的
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2