为了加速表格互动编辑,我们往往希望通过选中行就触发了行编辑,完成行编辑后,再选中另一个行做编辑,同时上一个编辑行被自动保存,直至完成需要的编辑内容。

页面效果可能如下:


1)设置需要编辑的列 editable: true  参考如下:

 colModel: [
{ label: '字段编码', name: 'FieldCode', key: true, width: 180, editable: false },
{
label: '字段名称',
name: 'FieldName',
width: 150,
editable: true,
edittype: "text",
editrules: { required: true }
},
{
label: '字段类型',
name: 'DataType',
width: 10,
hidden: true,
editable: true,
},
{
label: '是否排序',
name: 'IsOrder',
width: 80,
editable: true,
edittype: "select",
editoptions: {
//value: "true:是;false:否"
value: "true:true;false:false"
}
},
{
label: '列宽',
name: 'Width',
width: 55,
editable: true,
editrules: { required: true, integer: true },
edittype: "text"
}]

2)使用 onSelectRow 选中行事件

    $("#fieldGrid").jqGrid({
...
onSelectRow: EditSelectRow,
pager: "#fieldGridPager",
...
});

3)编写行选中的自定义方法 EditSelectRow

//选中行启用行编辑
function EditSelectRow(id)
{
//原选中行ID
var oldSelectRowId = $("#selectRowId").val();
if (oldSelectRowId != null && oldSelectRowId != "" && oldSelectRowId.length > 0) {
$("#fieldGrid").jqGrid('saveRow', oldSelectRowId);//保存上一行
} //当前选中行
$("#selectRowId").val(id);//临时存储当前选中行
//$("#fieldGrid").jqGrid('editRow', id);
$("#fieldGrid").jqGrid('editRow', id, { keys: true, focusField: 1 });
}

需要特别注意:不能同时支持内置行编辑和行事件触发的行编辑。会产生行结束编辑的干扰项,比较坑,请绕开。若要使用行编辑请分别采用以下某一种方式

jqgrid 单击行启用行编辑,切换行保存原编辑行

jqgrid 使用自带的行编辑

jqgrid 选中行触发编辑,切换下一行时验证和异步保存上一行数据

jqgrid 单击行启用行编辑,切换行保存原编辑行的更多相关文章

  1. easyui datagrid动态设置行、列、单元格不允许编辑

    Easyui datagrid 行编辑.列编辑.单元格编辑设置 功能: 动态对datagrid 进行行.列.单元格编辑进行设置不允许编辑. 禁用行编辑: 在编辑方法调用前,对选择的行进行判断,如果不允 ...

  2. MFC六大核心机制之四:永久保存(串行化)

    永久保存(串行化)是MFC的重要内容,可以用一句简明直白的话来形容其重要性:弄懂它以后,你就越来越像个程序员了! 如果我们的程序不需要永久保存,那几乎可以肯定是一个小玩儿.那怕我们的记事本.画图等小程 ...

  3. uniq命令注意事项,检查重复行的时候,只会检查相邻的行。

    今天在使用uniq命令统计数量时,uniq -c总是得不到想要的效果,相同的行没有合并,例如 后来在http://ju.outofmemory.cn/entry/78365才看到,原来uniq检查重复 ...

  4. 模块——Getopt::Long接收客户命令行参数和Smart::Comments输出获得的命令行参数内容

     我们在linux常常用到一个程序需要加入参数,现在了解一下 perl 中的有关控制参数的模块 Getopt::Long ,比直接使用 @ARGV 的数组强大多了.我想大家知道在 Linux 中有的参 ...

  5. c编程:输入一个数字n,则n代表n行,每行输入2个数字a,b计算每行的a+b问题。

    输入 第一行输入要计算的数据组数 n 接下来的 n 行,每行包括两个数a和b 输出 每行输出一组数据中a+b的值 例子输入 2 1 2 4 0 例子输出 3 4 代码: #include<std ...

  6. 删除datatable的行后,出现“不能通过已删除的行访问该行的信息”的错误,即DeletedRowInaccessibleException

    删除datatable的行后,出现“不能通过已删除的行访问该行的信息”的错误 =========================================================== 采 ...

  7. #首行输入数n,接下来输入n行数,以空格隔开

    #首行输入数n,接下来输入n行数,以空格隔开 n = int(raw_input())# print nL = []for i in range(n): L.append([int(x) for x ...

  8. ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view)

    在本节中,您将验证电影控制器生成的编辑方法(Edit action methods)和视图.但是首先将修改点代码,使得发布日期属性(ReleaseDate)看上去更好.打开Models \ Movie ...

  9. 验证编辑方法(Edit method)和编辑视图(Edit view)

    ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view) 在本节中,您将验证电影控制器生成的编辑方法(Edit action methods)和视图.但是 ...

随机推荐

  1. js-ES6学习笔记-Class(2)

    1.与函数一样,类也可以使用表达式的形式定义. const MyClass = class Me { getClassName() { return Me.name; } }; 这个类的名字是MyCl ...

  2. 【代码笔记】iOS-手机版本号,机型,操作系统版本,设备唯一标识符

    一,代码. RootViewController.m #import "ViewController.h" #import "sys/utsname.h" @i ...

  3. kotlin3-IdeaIU编辑器字体自动放大缩小

  4. MySql 利用crontab实现MySql定时任务

    MySql 利用crontab实现MySql定时任务 by:授客 QQ:1033553122 适用平台 任意myslq版本数据库 操作方法 登陆到数据库系统所在的linxu系统 第一步:新建名为cro ...

  5. ionic 上拉菜单(ActionSheet)安装和iOS样式不一样

    ISO中的界面是这样的: 然而,Android中的界面是这样的: 代码如下: HTML部分: <body ng-app="starter" ng-controller=&qu ...

  6. centos安装pip3

    安装pip3 1:安装依赖 yum install openssl-devel -y yum install zlib-devel -y 2:安装setuptools wget --no-check- ...

  7. C#中获取数组中相加和最接近或等于(<=)给定值的算法

    , ,,,,,,,,, }; List<List<int>> mylist = new List<List<int>>(); int length = ...

  8. 为何SQL SERVER使用sa账号登录还原数据库BAK文件失败,但是使用windows登录就可以

    今天发现一个问题,就是公司开发服务器上的sql server使用sa账号登录后,还原一个数据库bak文件老是报错,错误如下: TITLE: Microsoft SQL Server Managemen ...

  9. 【转】Spring学习---Bean配置的三种方式(XML、注解、Java类)介绍与对比

    [原文]https://www.toutiao.com/i6594205115605844493/ Spring学习Bean配置的三种方式(XML.注解.Java类)介绍与对比 本文将详细介绍Spri ...

  10. CIDR概述及其地址块计算

    CIDR概述 英文:Classless Inter-Domain Routing,中文是:无分类域间路由选择.一般叫做无分类编址. 设计目的:解决路由表项目过多过大的问题. 表示法:{<网络前缀 ...