0
我有jqGrid与所有行内联编辑模式，并且我正在尝试为这种配置实现级联下拉 。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行都处于编辑模式， ，子组的下拉列表包含所有子组。
UPDATE 我试图用this approach但我不能够找到联编辑模式下拉。
您可以使用[dataInit（http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions），而不是'oneditfunc'。要理解你所遇到的问题，应该更清楚地描述你的问题。文本“我无法在此事件中找到下拉菜单并筛选其选项”并不够清楚。例如，您可以发布代码片段。 – Oleg
@Oleg谢谢你的快速回答，并对你的简短描述感到抱歉 - 我刚刚添加了关于我的问题的更多信息，我希望这很清楚。我正在使用jqGrid 4.5.4 – 0x40c1