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

页面效果可能如下:


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. HTML页面局部刷新

    /.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服 ...

  2. js-JavaScript实现数字的千位分隔符

    function thousandSeparator(num) { return num && (num .toString().indexOf('.') != -1 ? num.to ...

  3. 关于flex布局兼容

    (做个记录) 一.W3C各个版本的flex 2009 version 标志:display: box; or a property that is box-{*} (eg. box-pack) 201 ...

  4. Postman Postman测试接口之POST提交本地文件数据

    Postman测试接口之POST提交本地文件数据   by:授客 QQ:1033553122 本文主要是针对用Postman POST提交本地文件数据的方法做个简单介绍 举例: 文件同步接口 接口地址 ...

  5. 6.1 函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数

      函数的返回值: 函数一旦执行到   return,函数就会结束,并会返回return 后面的值,如果不使用显式使用return返回,会默认返回None . return None可以简写为   r ...

  6. jQuery EasyUI datagrid列名包含特殊字符会导致表格错位

    首先申明:本文所述的Bug存在于1.3.3以及更高版本中,其它低版本,本人未测试,太老的版本不想去折腾了. 洒家在写前端的SQL执行工具时,表格用了 jQuery EasyUI datagrid,因为 ...

  7. 【已解决】mac上appium报错:“Could not find aapt Please set the ANDROID_HOME environment variable with the Android SDK root directory path”

    按照网上教程配置完appium环境后,真机跑自动化过程,遇到如下报错: appium报错如下: [ADB] Checking whether aapt is present [ADB] The AND ...

  8. Apache2启动错误Could not reliably determine the server's fully qualified domain name

    错误情况: AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using ...

  9. Azure 中的 Windows 虚拟机概述

    Azure 虚拟机 (VM) 是 Azure 提供的多种可缩放按需分配计算资源之一. 通常情况下,如果需要以更大的力度(相对于其他控制选项)控制计算环境,则应选择 VM. 本文介绍创建 VM 之前的注 ...

  10. 在Eclipse中运行Jboss时出现java.lang.OutOfMemoryError:PermGen space及其解决方法

    在Eclipse中运行Jboss时出现java.lang.OutOfMemoryError:PermGen space及其解决方法 在Eclipse中运行Jboss时,时间太长可能有时候会出现java ...