jqgrid 实现行编辑,表单编辑的列联动
这个问题的场景相信大家都遇到过,比方有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从服务端获取。
实现行编辑模式中的列联动是不是非常easy。相对于网上介绍的用列的formaterr与unformat和custom_element与custom_value的确简单了非常多。
以下我们来看看表单编辑模式的联动。相同实现也非常easy。在上图中点击新增,将会出现例如以下界面:
核心代码为:
//加入
{
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,
},
在加入button相应的事件beforeShowForm中。获取控件Id为$(#colName,formId). formId为jqgird自己主动传送给我们的。
获取到控件的Id后,后面的实现方式就非常相似了。问题也就攻克了。
关于这个实现方式,我也查了非常多的资料,比对了不同的实现方式。
总想找到一个快捷简易的实现方式。当然。这仅仅是个演示演示样例,假设实战,这些代码都能够进行再封装重构。能够实现更简单。
OK,解说完了。希望对大家有所帮助。
在这里要感谢一下这个看起来有点像韩寒的兄弟:泰迪小贱熊,他的这篇文章jqGrid
行编辑 select 3级联动 的一种实现方法给了我本文的实现灵感。
jqgrid 实现行编辑,表单编辑的列联动的更多相关文章
- 【jQuery EasyUI系列】 创建展开行明细编辑表单的CRUD应用
当切换数据网络格局(datagrid view)到detailview,用户可以展开一行来显示一些行的明细在行下面,这个功能允许您为防止在明细行面板中的编辑表单提供一些合适的布局. 步骤1.在HTML ...
- 创建展开行明细编辑表单的 CRUD 应用
http://www.runoob.com/jeasyui/jeasyui-app-crud3.html jQuery EasyUI 应用 - 创建展开行明细编辑表单的 CRUD 应用 当切换数据网格 ...
- C# Winform 通过FlowLayoutPanel及自定义的编辑控件,实现快速构建C/S版的编辑表单页面
个人理解,开发应用程序的目的,不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景也最为复杂,包括但不限于:表格记录查询.报表查询.导出文件查询等等 ...
- Winform 通过FlowLayoutPanel及自定义的编辑控件,实现快速构建C/S版的编辑表单页面 z
http://www.cnblogs.com/zuowj/p/4504130.html 不论是B/S或是C/S结构类型,无非就是实现可供用户进行查.增.改.删,其中查询用到最多,开发设计的场景 也最为 ...
- vue的表单编辑删除,保存取消功能
过年回来第一篇博客,可能说的不是很清楚,而且心情可能也不是特别的high,虽然今天是元宵,我还在办公室11.30在加班,但就是想把写过的代码记下来,怕以后可能真的忘了.(心将塞未塞,欲塞未满) VUE ...
- atitit.编辑表单的实现最佳实践dwr jq easyui
atitit.编辑表单的实现最佳实践dwr jq easyui 1. 提交表单 1 2. 表单验证 1 3. 数据保存使用meger方式取代save&update方式 1 3.1. Filte ...
- atitit.提升开发效率---MDA 软件开发方式的革命(4)----编辑表单建模
)----编辑表单建模 1. 建模语言的选型anno+html...不是uml 1 2. 指定显示模板 @BeanEditForm(tmplt="c:/edit.html") 1 ...
- ASP.NET MVC 音乐商店 - 5. 通过支架创建编辑表单
在上一章,我们已经从数据库获取数据,然后显示出来,这一章,我们将允许编辑数据. 创建 StoreManagerController 控制器 我们将要创建称为 StoreManager 的控制器,对于这 ...
- ASP.NET Core Razor 编辑表单 - ASP.NET Core 基础教程 - 简单教程,简单编程
原文:ASP.NET Core Razor 编辑表单 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core Razor 编辑表单 上一章节我们介绍了标签助手和 HT ...
随机推荐
- MongoDB + node-mongoskin简单演示样例
特点 无模式 MongoDB 中的每一条文档,都是一个 JSON 对象,因此你无需提前定义一个集合的结构,集合中的每一个文档也能够有不同的结构. 异步写入 MongoDB 默认全部的写操作都是『不安全 ...
- HTML5学习笔记之二CSS基础
一般来说,CSS都存储为一个文件.然后各个html page能够指定使用哪个CSS文件.这样这些html页面就能够保持一致的风格. 通常能够通过在head中加上一行指定CSS的链接. <!DOC ...
- Image-Loader LruMemoryCache
这段时间在研究Universal-Image-Loader 这个图片处理开源框架,这里主要分析一下它的LRU(Least Resently Used,最近最少使用算法)内存缓存的实现. 在UIL它提供 ...
- UICollectionView——整体总结
前言 这几天有时间看了下UICollectionView的东西,才发觉它真的非常强大,很有必要好好学习学习.以前虽然用过几次,但没有系统的整理总结过.这两天我为UICollectionView做一个比 ...
- 缓存函数memorize
function mulity(x){ return x*x; } function memorize(f){ var cache = {}; var key = arguments.length + ...
- 12、UVC&V4L2的关系
UVC是一种usb视频设备驱动.用来支持usb视频设备,凡是usb接口的摄像头都能够支持 V4L2是Linux下的视频采集框架.用来统一接口,向应用层提供API UVC: USB video clas ...
- ping---测试主机之间网络的连通性
ping命令用来测试主机之间网络的连通性.执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问题,就会回应该信息,因而得知该主机运作正常. 选项 -d:使用Socke ...
- 【Codecraft-18 and Codeforces Round #458 (Div. 1 + Div. 2, combined) A】 Perfect Squares
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] N*1000暴力就好 [代码] #include <bits/stdc++.h> using namespace std ...
- hdu 1233 还是畅通project (克鲁斯卡尔裸题)
还是畅通project Time Limit: 4000/2000 MS (Java/Others) M ...
- java / C++ B+树代码
C++ 代码 #include <> JAVA 代码 package org.test.me.struct; /** * author: shuly * create: 2018-09-1 ...