jqgrid 实现行编辑,表单编辑的列联动
来源:互联网 发布:淘宝联盟怎么做高佣 编辑:程序博客网 时间:2024/05/21 06:44
这个问题的场景相信大家都遇到过,比如有A,B,C三列,B,C列均为下拉框,但是C列的值是由B列的值来决定的,即C列中的值是动态变化的,变化的依据就是B列中你选择的值。本文给出的是一个实用,简易快捷的实现方式。先看图:
本例子实现的如果是常白班,则班别那一列只显示白班,否则的话,那就显示白晚班。可以看成是两列联动。
实现核心代码为:
onSelectRow: function (id) { if (id && id !== lastSel) { jQuery("#TblClassTypeId").restoreRow(lastSel); lastSel = id; } var editkey = $('#TblClassTypeId').jqGrid('getCell', id, 'Id_Key'); var editparameters = { keys: true, extraparam: { "editkey": editkey }, oneditfunc: function () { $('#' + id + '_WorkerId').attr('readonly', true); } }; jQuery("#TblClassTypeId").editRow(id, editparameters); $('#' + id + '_IsAlwaysDay').change(function () { var selectvalue = $(this).val(); var classTypeCol = $('#' + id + '_ClassType'); classTypeCol.empty(); if (selectvalue == "是") { classTypeCol.append("<option value=\"白班\">白班</option>"); } else { classTypeCol.append("<option value=\"白班\">白班</option>") .append("<option value=\"晚班\">晚班</option>"); } }); },在行编辑模式中,选择触发动作为选择行(onSelectRow)时。这时,输入单元格的空间Id为id+"_colName"。id为行的id. 拿到控件的Id,就可以添加select的change事件。在这个事件中可以进行联动列的处理。如上面代码,由于下拉选项比较简单,我选择直接赋值。如果下拉选项比较多的话,可以用ajax从服务端获取。
实现行编辑模式中的列联动是不是很简单。相对于网上介绍的用列的formaterr与unformat和custom_element与custom_value的确简单了很多。
下面我们来看看表单编辑模式的联动,同样实现也很简单。在上图中点击新增,将会出现如下界面:
核心代码为:
//添加 { beforeShowForm : function (formid) { $('#WorkerId', formid).removeAttr("readonly", "readonly"); $('#IsAlwaysDay',formid).change(function () { var selectvalue = $(this).val(); var classTypeCol = $('#ClassType',formid); classTypeCol.empty(); if (selectvalue == "是") { classTypeCol.append("<option value=\"白班\">白班</option>"); } else { classTypeCol.append("<option value=\"白班\">白班</option>") .append("<option value=\"晚班\">晚班</option>"); } }); }, reloadAfterSubmit: true, },
在添加按钮对应的事件beforeShowForm中,获取控件Id为$(#colName,formId). formId为jqgird自动传送给我们的。获取到控件的Id后,后面的实现方式就很相似了。问题也就解决了。
关于这个实现方式,我也查了很多的资料,比对了不同的实现方式。总想找到一个快捷简易的实现方式。当然,这只是个演示示例,如果实战,这些代码都可以进行再封装重构,可以实现更简单。
OK,讲解完了,希望对大家有所帮助。在这里要感谢一下这个看起来有点像韩寒的兄弟:泰迪小贱熊,他的这篇文章jqGrid 行编辑 select 3级联动 的一种实现方法给了我本文的实现灵感。
0 0
- jqgrid 实现行编辑,表单编辑的列联动
- jqgrid实现行编辑功能
- JQGrid的用法解析(列编辑,添加行,删除行)
- JQGrid的用法解析(列编辑,添加行,删除行)
- jqgrid 编辑隐藏列的设置
- jqGrid表单编辑配置参数
- jqgrid 实现基础的单行编辑功能
- jqgrid行编辑
- jqGrid行编辑DEMO
- jqGrid行编辑配置
- jqGrid行编辑事件
- jqGrid行编辑配置
- jqGrid编辑
- jqgrid编辑
- jqgrid编辑
- jqGrid使可编辑列获取焦点
- jqGrid 多选复选框 编辑列
- jqgrid-2动态改变列编辑属性
- c#编程中遇到的错误 持续更新
- tornado+ansible+twisted+mongodb运维自动化系统开发(三)
- 833 取石子(七)
- .NET创建、删除、复制文件夹及其子文件的实例方法
- hdu2018 母牛的故事
- jqgrid 实现行编辑,表单编辑的列联动
- SQL server 2000 开发版安装时候提示”没有启动服务器服务“ 是怎么回事?该怎么解决?谢谢请看下图
- android 消息机制的总结
- 844 A+B Problem(V)
- zoj 3497 矩阵快速幂
- DataGridView的高亮显示
- Java学习笔记(三)数据类型
- 杭电ACM2565放大的X----20170726
- 845 无主之地1