在网格中,我有一个国家下拉列表和一个省/州下拉列表。当用户选择“国家/地区”下拉列表时,我需要获取列表以在其行中加载当前所选国家/地区的省/州。
我使用 dataUrl 从服务器(使用 MVC 3、.Net)获取我的列表。我在网格的列中编写了代码来定义 dataInit 编辑选项来更改 dataUrl 以包含我当前的国家 ID。但是,似乎在 dataInit 事件发生之前调用了 dataUrl。
更复杂的是,我创建了一个基本网格视图,它在整个应用程序中重复使用。这是必需的,因为我们在应用程序中有 30-60 个不同的网格。因此,每个网格的用户只定义列、它们的类型、编辑类型、格式等。基本网格视图只是动态生成 jqgrid(它使用 Vs.Net 的 MVC 3 框架中的 RAZOR 视图引擎编写)。
在我定义为具有依赖列的选择类型的每一列的剃须刀代码(basegrid)中,我为 dataInit 函数生成代码以获取该值并更新列定义的 dataUrl。
我的结论:
看来我的省/州列的 dataInit 方法是在调用 dataUrl 之后调用的(即在我调用服务器获取列表之后)。如果这是 dataInit 的正常行为,我需要一个不同的列事件方法。
要求:
1)我不能使用标准网格“BeforeEditCell”事件,因为我可能有多个选择,这可能取决于其他列。同样,我的 basegrid 的用户将在运行时确定依赖关系。(剃刀代码遍历每一列并生成网格语法)。
2) 我希望在调用 url 进行加载之前修改 dataUrl。我不想执行加载列表的调用
3) 我想避免将列表加载到 javascript 数组中。所以必须使用dataUrl。
这是声明的内容的片段。我删除了其他列,因为它们遵循更简单的设置,但在脚本中类似。
jQuery("#gridList").jqGrid({
url: '/Home/HonourAwardGridData',
datatype: "json",
colNames: [
'Country',
'Province / State',
],
colModel: [
{
name: 'Country',
index: 'Country',
width: 90,
sortable: true,
editable: true,
editrules: {
edithidden: false,
required: false },
hidden: false,
edittype: 'select',
editoptions: {
dataEvents: [
{ type: 'change', fn: function(e) { $("#gridList").jqGrid("saveCell", saveRow, saveCol); } },
],
dataUrl: '/Common/GetCountryValues?pageId=HonourAward',
buildSelect: BuildLookupEntitySelect
},
},
{
name: 'ProvinceState',
index: 'ProvinceState',
width: 90,
sortable: true,
editable: true,
editrules: {
edithidden: false,
required: false },
hidden: false,
edittype: 'select',
editoptions: {
dataEvents: [
{ type: 'change', fn: function(e) { $("#gridList").jqGrid("saveCell", saveRow, saveCol); } },
],
dataUrl: '/Common/GetProvinceValues?pageId=HonourAward&countryId={0}',
dataInit: function(elem) {
var myGrid = $('#gridList');
var selRowId = mygrid.jqGrid('getGridParam', 'selrow');
var depColName = 'Country';
var depColValue = mygrid.jqGrid('getCell', selRowId, depColName);
var newDataUrl = '/Common/GetProvinceValues?pageId=HonourAward&countryId={0}';
newDataUrl = newDataUrl.replace("{0}", depColValue);
$("#grid").jqGrid('setColProp', depColName, {dataUrl: newDataUrl});
},
buildSelect: BuildLookupEntitySelect
},
}
],
rowNum: 200,
cellEdit: true,
cellSubmit: 'remote',
cellurl: '/Home/EditHonourAwardGridData',
multiselect: true,
grouping: false,
jsonReader: {
root: "rows", //array containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
id: 'RecordId' //index of the column with the PK in it
},
toppager: true,
shrinkToFit: false,
rownumbers: false,
autowidth: true,
height: 'auto',
autoencode: true,
altRows : true,
pager: '#gridPager',
viewrecords: true,
sortable: false,
afterEditCell: function (id, name, val, IRow, ICol) {
saveRow = IRow;
saveCol = ICol;
}
});
jQuery("#gridList").jqGrid('navGrid', '#gridPager', { search: false,
edit: true,
add: false,
del: false,
editfunc: function(id) {
var row = jQuery("#gridList").jqGrid('getRowData', id);
var dialogTitle = 'Honours and Career Awards' + ' - ' + row['Name'];
LoadReportUpdateView('HonourAwardUpdate', dialogTitle, row.RecordId);
},
addfunc: function() {
LoadReportAddView('HonourAwardAdd', 'Honours and Career Awards' + ' - Add New');
}
})
.navButtonAdd('#gridPager', {
caption: "Columns",
onClickButton: function () {
ChooseColumns("#gridList", 'HonourAward', 'Select columns for Honours and Career Awards grid');
},
position: "last"
});
});
提前感谢您提供的任何帮助或指导。