我有所有行内联编辑模式的jqGrid，我正在尝试实现级联下拉菜单 对于这样的配置。
我试图对editRow使用oneditfunc函数，但我无法在此事件中找到下拉列表并过滤其选项。
在这种情况下，我将非常感谢你的帮助。
下面你可以通过dataInit找到我的代码：
//I am using webserbvce to get data by $ajax, and on success I am calling addJSONData thats
// way I am using girdComplete to set rows in edit mode instead of loadComplete
//this is simple json string for demonstration
var gridJson = { Total: 1, Records: 4, Page: 1, Rows: [
{ Id: 1, Key: "2013-10-23 11:02:42.643#4#6#18", Title: "Title 1", GroupId: 1, SubGroupId: 1 },
{ Id: 2, Key: "2013-10-02 09:35:07.417#4#6#19", Title: "Title 2", GroupId: 2, SubGroupId: 6 },
{ Id: 3, Key: "2013-10-02 09:37:24.663#4#6#20", Title: "Title 3", GroupId: 3, SubGroupId: 10 },
{ Id: 4, Key: "2013-10-04 16:27:37.530#4#6#21", Title: "Title 4", GroupId: 4, SubGroupId: 15 }
]
};
var gridDataGroup = { 1: "Group One", 2: "Group Two", 3: "Group Three", 4: "Group Four" };
var gridDataSubGroup1 = { 1: "Sub goup 1-1", 2: "Sub group 1-2", 3: "Sub group 1-3", 4: "Sub group 1-4" };
var gridDataSubGroup2 = { 5: "Sub group 2-1", 6: "Sub group 2-2", 7: "Sub group 2-3" };
var gridDataSubGroup3 = { 8: "Sub group 3-1", 9: "Sub group 3-2", 10: "Sub group 3-3", 11: "Sub group 3-4", 12: "Sub group 3-5" };
var gridDataSubGroup4 = { 13: "Sub group 4-1", 14: "Sub group 4-2", 15: "Sub group 4-3", 15: "Sbu group 4-4" };
var gridDataSubGroup = {
1: gridDataSubGroup1,
2: gridDataSubGroup2,
3: gridDataSubGroup3,
4: gridDataSubGroup4
}
var gridDataSubGroupAll = {};
$.extend(gridDataSubGroupAll, gridDataSubGroup1, gridDataSubGroup2, gridDataSubGroup3, gridDataSubGroup4);
//initialize jqGrid
$grid.jqGrid({
//datatype: 'json',
datatype: 'jsonstring',
datastr: gridJson,
jsonReader: {
repeatitems: false,
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
id: "Key"
},
colNames: [
'Key',
'Title',
'Group',
'Subgroup'
],
colModel: [
{ name: 'Key', index: 'Key', width: 300, stype: 'text' },
{ name: 'Title', index: 'Title', width: 300, stype: 'text', editable: true, edittype: "text" },
{ name: 'Group', index: 'GroupId', jsonmap: 'GroupId', width: 200, stype: "select", editable: true, edittype: "select", formatter: "select",
sorttype: function(cell) {
return gridDataGroup[cell];
},
editoptions: {
value: gridDataGroup,
dataInit: function(elem) {
var groupId = $(elem).val();
$grid.setColProp('SubGroup', { editoptions: { value: gridDataSubGroup[groupId]} });
},
dataEvents: [
//{ type: "change", fn: function (e) { TODO } },
//{ type: "keyup", fn: function (e) { TODO} }
]
}
},
{ name: 'SubGroup', index: 'SubGroupId', jsonmap: 'SubGroupId', width: 200, stype: "select", editable: true, edittype: "select", formatter: "select",
sorttype: function(cell) {
return gridDataSubGroupAll[cell];
},
editoptions: {
value: gridDataSubGroupAll
}
}
],
pager: $('#pager'),
sortname: 'Key',
viewrecords: true,
sortorder: "asc",
caption: "jqGrid",
height: '100%',
shrinkToFit: true,
//Required for client side sorting
loadonce: true,
altRows: true,
gridComplete: function() {
//set jqGrid datatype to local
$grid.setGridParam({ datatype: 'local' });
//set all rows in editRow mode
var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
for (i = 0; i < l; i++) {
$this.jqGrid('editRow', ids[i],
{
keys: true,
oneditfunc: function() {
}
});
};
},
onCellSelect: function(rowid, icol, cellcontent, e) { alert(cellcontent); },
//muliSort works only on local dataset
multiSort: true
});
//in order to allow sorting rows in edit mode
//first save all changes and then sort.
// on gridComplete rows are going back to edit mode
$.each($grid[0].grid.headers, function() {
var $th = $(this.el), i, l, clickHandler, clickHandlers = [],
currentHandlers = $._data($th[0], "events"),
clickBinding = currentHandlers.click;
if ($.isArray(clickBinding)) {
for (i = 0, l = clickBinding.length; i < l; i++) {
clickHandler = clickBinding[i].handler;
clickHandlers.push(clickHandler);
$th.unbind('click', clickHandler);
}
}
$th.click(function() {
var p = $grid[0].p, savedRow = p.savedRow, j, len = savedRow.length;
if (len > 0) {
// there are rows in cell editing or inline editing
if (p.cellEdit) {
// savedRow has the form {id:iRow, ic:iCol, name:nm, v:value}
// we can call restoreCell or saveCell
//$grid.jqGrid("restoreCell", savedRow[0].id, savedRow[0].ic);
$grid.jqGrid("saveCell", savedRow[0].id, savedRow[0].ic);
} else {
// inline editing
for (j = len - 1; j >= 0; j--) {
// call restoreRow or saveRow
//$grid.jqGrid("restoreRow", savedRow[j].id);
$grid.jqGrid("saveRow", savedRow[j].id);
}
}
}
});
l = clickHandlers.length;
if (l > 0) {
for (i = 0; i < l; i++) {
$th.bind('click', clickHandlers[i]);
}
}
});
问题是子组的下拉列表包含的所有选项都没有通过此代码基于GroupId进行过滤：
dataInit: function(elem) {
var groupId = $(elem).val();
$grid.setColProp('SubGroup', { editoptions: { value: gridDataSubGroup[groupId]} });
不幸的是我无法发布屏幕截图，但所有4行都处于编辑模式， 子组的下拉列表包含所有子组。
更新 我试图使用this approach，但我无法在内联编辑模式中找到下拉列表。
答案 0 :(得分：0)
我找到了解决问题的方法： 1.我删除了dataInit部分 - 它似乎在我的情况下不起作用。 2.在gridComplete上，在编辑模式下设置行之前更改editoptions的值，然后返回为editoptions设置allsubgroup。
gridComplete: function() {
//loadComplete: function() {
//set jqGrid datatype to local
$($grid).setGridParam({ datatype: 'local' });
//set all rows in editRow mode
var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
for (i = 0; i < l; i++) {
var groupId = $this.jqGrid('getCell', ids[i], 'Group');
var cm = $this.jqGrid('getColProp', 'SubGroup');
cm.editoptions = { value: gridDataSubGroup[groupId]};
$this.jqGrid('editRow', ids[i],
{
keys: true,
oneditfunc: function() {
}
});
//asigne back all values for
cm.editoptions = { value: gridDataSubGroupAll };
};
},