这个问题的场景相信大家都遇到过，比方有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级联动 的一种实现方法给了我本文的实现灵感。