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

页面效果可能如下:


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. linux mysql 卸载与安装及配置命令

    1.RPM包安装方式的MySQL卸载 1) 检查是否安装了MySQL组件. # rpm -qa | grep -i mysql 2)卸载前关闭MySQL服务 # service mysql statu ...

  2. for循环中嵌套setTimeout,执行顺序和结果该如何理解?

    这两天在捣鼓作用域的问题,有的时候知识这个东西真的有点像是牵一发而动全身的感觉.在理解作用域的时候,又看到了一道经典的面试题和例子题. 那就是在for循环中嵌套setTimeout延时,想想之前面试的 ...

  3. vue-router 手势滑动触发返回

    vue-router的路由变换只存在“变换前”和“变换后”,不存在“切换中”的状态,所以做不到大多数app(微信那样的)在滑动过程中让界面跟随手指移动.但滑动事件还是可以监听的,我们可以在滑动之后再触 ...

  4. 解决 web.xml is missing and <failOnMissingWebXml> is set to true 报错

    在学习maven模块化构建项目的时候遇到了如下报错信息: web.xml is missing and <failOnMissingWebXml> is set to true. 这时候需 ...

  5. Sofware-Engineering Zero

    第一部分:结缘计算机 与大部分同学一样,也是刚刚进入大学才接触编程,在第一堂C语言课上敲下了第一行属于自己的代码""Hello World",然后在摸索中开始自己的Cod ...

  6. 风险指针(Hazard Pointer) 内存空间共享模型

    WiredTiger是一种高性能的开源存储引擎,现已在MongoDB中作为内模式应用.WiredTiger支持行存储.列存储两种存储模式,采用LSM Tree方式进行索引记录 WiredTiger支持 ...

  7. COCOMOII

    一.COCOMOII是什么 cocomo是 COnstructive COst MOdel(建设性成本估算模型)的缩写.最早是由Dr. Barry Boehm在1981年提出.是一种精确的.易于使用的 ...

  8. jmeter如何保持JSESSIONID

    利用Jmeter做接口测试的时候,如何提取头部的JSESSIONID然后传递到下一个请求,继续完成当前用户的请求. 一.如果响应数据里面没有返回JSESSIONID,直接添加http cookies ...

  9. 斯诺克台球比赛规则 (Snooker)

    斯诺克台球比赛规则 斯诺克(Snooker)的意思是“阻碍.障碍”,所以斯诺克台球有时也被称为障碍台球.此项运动使用的球桌长约3569毫米.宽1778毫米,台面四角以及两长边中心位置各有一个球洞,使用 ...

  10. JDK5的新特性之 增强for

      package cn.itcast.day19.foreach; import java.util.ArrayList; import java.util.Collection; import j ...