すべての行がインライン編集モードの 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 行すべてが編集モードになっており、サブグループのドロップダウンにはすべてのサブグループが含まれています。
更新このアプローチ を使用しようとしましたが、インライン編集モードでドロップダウンを見つけることができません。