博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jqgrid 单击行启用行编辑,切换行保存原编辑行
阅读量:5843 次
发布时间:2019-06-18

本文共 1995 字,大约阅读时间需要 6 分钟。

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

页面效果可能如下:


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"               }]
View Code

2)使用 onSelectRow 选中行事件

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

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

 


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

转载于:https://www.cnblogs.com/senyier/p/7364229.html

你可能感兴趣的文章
C++静态局部对象
查看>>
Hibernate用JPA注解 CascadeType.REMOVE 不起作用的解决办法
查看>>
一步步学习EF Core(3.EF Core2.0路线图)
查看>>
go语言中的坑
查看>>
python之常用模块
查看>>
1到20阶乘的和
查看>>
网络ASI
查看>>
Luogu P4707 重返现世
查看>>
xml.dom——文档对象模型API
查看>>
目标与绩效管理实战专家胡立
查看>>
富文本编辑器提交内容 报错
查看>>
css3学习 理论之弹性盒模型
查看>>
h5做的时钟
查看>>
Oracle SQL: TO_CHAR and TO_NUMBER 笔记
查看>>
axios 中断请求
查看>>
Spring的注解配置与XML配置之间的比较
查看>>
2014手机分析图
查看>>
Linux PID 1 和 Systemd
查看>>
一元多项式相加
查看>>
commandLink/commandButton/ajax backing bean action/listener method not invoked (转)
查看>>