jqGrid相当新，还在学习很多东西。无法解决这个问题：
我有一个选择＆＃39;用户从一系列类别/名称中选择的下拉字段，根据用户选择我需要填充下一个选择＆＃39;下拉列表与相应的子类别集。
我使用dataUrl加载我的初始列表，并且子类别也需要从dataUrl加载。
到目前为止我的代码：
$(function () {
var lastsel2
$("#jqGrid_BdgtEmp").jqGrid({
regional: 'en',
prmNames: { id: "empTbID" },
url: "/Budget/GetBdgtEmp",
datatype: 'json',
mtype: 'Get',
colNames: ['EmpTbID', 'DepartmentId', 'DepartmentName', 'EmployeeName', 'EmployeeJobFunctionId', 'EmployeeJobFunctionName', 'EmpStart', 'EmpEnd', 'BsBasic', 'BsPayRise', 'BsComm', 'BsOverTime',
'BsMthBonus', 'BsQtrBonus', 'BsGross', 'RatesEmpNhi', 'RatesPension', 'BoEmpNhi', 'BoPension', 'BoHealth', 'BoBenefits', 'BoTotal', 'CarStatus', 'CarWDown', 'CarFuel', 'CarRunCost', 'CarTotal',
'PayRisePercent', 'PayRiseStart'],
colModel: [
{ key: true, name: 'empTbID', index: 'empTbID', editable: false, editoptions: { "class": "jqgrid-readonlycolumn" } },
{ key: false, name: 'departmentId', index: 'departmentId', editable: true },
{
key: false,
name: 'departmentName',
index: 'departmentName',
editable: true,
edittype: 'select',
editoptions:
{
size: 1,
dataUrl: '/Budget/GetDepartmentListSel'
}
},
{ key: false, name: 'employeeName', index: 'employeeName', editable: true },
{ key: false, name: 'employeeJobFunctionId', index: 'employeeJobFunctionId', editable: true },
{
key: false,
name: 'employeeJobFunctionName',
index: 'employeeJobFunctionName',
editable: true
},
{ key: false, name: 'empStart', index: 'empStart', editable: true },
{ key: false, name: 'empEnd', index: 'empEnd', editable: true },
{ key: false, name: 'bsBasic', index: 'bsBasic', editable: true },
{ key: false, name: 'bsPayRise', index: 'bsPayRise', editable: true },
{ key: false, name: 'bsComm', index: 'bsComm', editable: true },
{ key: false, name: 'bsOverTime', index: 'bsOverTime', editable: true },
{ key: false, name: 'bsMthBonus', index: 'bsMthBonus', editable: true },
{ key: false, name: 'bsQtrBonus', index: 'bsQtrBonus', editable: true },
{ key: false, name: 'bsGross', index: 'bsGross', editable: true },
{ key: false, name: 'ratesEmpNhi', index: 'ratesEmpNhi', editable: true },
{ key: false, name: 'ratesPension', index: 'ratesPension', editable: true },
{ key: false, name: 'boEmpNhi', index: 'boEmpNhi', editable: true },
{ key: false, name: 'boPension', index: 'boPension', editable: true },
{ key: false, name: 'boHealth', index: 'boHealth', editable: true },
{ key: false, name: 'boBenefits', index: 'boBenefits', editable: true },
{ key: false, name: 'boTotal', index: 'boTotal', editable: true },
{ key: false, name: 'carStatus', index: 'carStatus', editable: true },
{ key: false, name: 'carWDown', index: 'carWDown', editable: true },
{ key: false, name: 'carFuel', index: 'carFuel', editable: true },
{ key: false, name: 'carRunCost', index: 'carRunCost', editable: true },
{ key: false, name: 'carTotal', index: 'carTotal', editable: true },
{ key: false, name: 'payRisePercent', index: 'payRisePercent', editable: true },
{ key: false, name: 'payRiseStart', index: 'payRiseStart', editable: true }],
onSelectRow: function (empTbID) {
if (empTbID && empTbID !== lastsel2) {
$("#jqGrid_BdgtEmp").restoreRow(lastsel2);
$("#jqGrid_BdgtEmp").editRow(empTbID, true, '', '', '', '', reload);
lastsel2 = empTbID;
}
},
footerrow: true,
userDataOnFooter : true,
editurl: '/Budget/EditBdgtEmp',
pager: jQuery('#jqControlls_BdgtEmp'),
rowNum: 10,
rowList: [10, 20, 30, 40, 50],
height: '100%',
viewrecords: true,
caption: 'Employees',
emptyrecords: 'No employees to display',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
Id: "0"
},
autowidth: false,
shrinkToFit:false,
forceFit:false,
multiselect: false,
loadComplete: function () {
// footer data
$(this).jqGrid("footerData", "set", {
empTbID: "<b>Total:</b>",
bsBasic: $(this).jqGrid('getCol', 'bsBasic', false, 'sum'),
bsPayRise: $(this).jqGrid('getCol', 'bsPayRise', false, 'sum'),
bsComm: $(this).jqGrid('getCol', 'bsComm', false, 'sum')
});
}
}).navGrid('#jqControlls_BdgtEmp', { edit: true, add: true, del: true, search: false, refresh: true },
{
zIndex: 100,
url: '/Budget/EditBdgtEmp',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response) {
if (response.responseText) {
console.log(response.responseText);
}
}
},
{
zIndex: 100,
url: "/Budget/CreateBdgtEmp",
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
console.log(response.responseText);
}
}
},
{
zIndex: 100,
url: "/Budget/DeleteBdgtEmp",
closeOnEscape: true,
closeAfterDelete: true,
recreateForm: true,
msg: "Are you sure you want to delete this row? ",
afterComplete: function (response) {
if (response.responseText) {
console.log(response.responseText);
}
}
});
$("#jqGrid_BdgtEmp").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders: [
{ startColumnName: 'empTbID', numberOfColumns: 12, titleText: '<b>Top level placeholder</b>' }
]
});
$("#jqGrid_BdgtEmp").jqGrid('setGroupHeaders', {
useColSpanStyle: false,
groupHeaders: [
{ startColumnName: 'empTbID', numberOfColumns: 2, titleText: '<b>Mid placeholder 1</b>' },
{ startColumnName: 'departmentName', numberOfColumns: 6, titleText: '<b>Mid placeholder 2</b>' }
]
});
function reload(empTbID, result) {
$("#jqGrid_BdgtEmp").trigger("reloadGrid");
}
});
因此，在上面的示例中，当用户选择我需要的部门时，然后根据该初始选择加载相关的工作职能描述列表。
次要问题;
您可以在一行中链接两个以上的选择字段，例如在＆＃39;选择1＆＃39; （导致） - ＆gt; ＆＃39;选择2＆＃39;中的特定选项（导致） - ＆gt; ＆＃39;选择3＆＃39;中的具体选项等等？
研究和我到目前为止尝试的内容
编辑＃2
这有点像我所需要的，虽然是在动手中完成的：JsFiddle
摘自此讨论：GitHub