我在我的 filterToolbar 中使用来自服务器的数据填充三个下拉框，如下面的 prodValues、envValues 和 typeValues 的声明中所示。我想更改我的代码以在 beforeProcessing 事件中执行此操作并从主网格数据转储中提取值。我已经让服务器发送我认为正确的 json 响应来执行此操作：
{
"pVals":"Product1:Product1;Product2:Product2;etc:etc",
"eVals":"??:??;Dev:Dev;PreProd:PreProd;Prod:Prod;Test/QA:Test/QA",
"tVals":"??:??;App:App;Service:Service;SQL:SQL;Web:Web",
"page":0,
"total":0,
"records":537,
"rows":[ /* many rows */
]
}
如何在 beforeProcessing 事件中挑选出 pVals、eVals 和 tVals 字符串并将它们粘贴到相应的 filterToolbar 选择框中？
这是我的网格代码供参考，我解决此问题的失败尝试已注释掉：
$(function () {
var grid = $("#PSGrid");
var pVals, eVals, tVals;
// get values from Products table
var prodValues = $.ajax({
url: "jqGridHandler.ashx?oper=pVals",
async: false,
success: function (data) {
}
}).responseText;
// get values from Environments table
var envValues = $.ajax({
url: "jqGridHandler.ashx?oper=eVals",
async: false,
success: function (data) {
}
}).responseText;
// get values from ServerTypes table
var typeValues = $.ajax({
url: "jqGridHandler.ashx?oper=tVals",
async: false,
success: function (data) {
}
}).responseText;
var lastsel = -1;
// build the grid
grid.jqGrid({
url: 'jqGridHandler.ashx',
editurl: 'jqGridEditor.ashx',
datatype: 'json',
height: 550,
width: 'auto',
colNames: ['ID', 'Product', 'Environment', 'Hostname', 'IP', 'Description', 'Type', 'PortsUsed', 'DeletedFlag', 'Decommissioned', 'User'],
colModel: [
{ name: 'ID', index: 'ID', width: 50, sortable: true, hidden: true, editable: false, key: true, sorttype: 'int' },
{
name: 'Product', index: 'Product', width: 125, sortable: true, editable: true,
stype: 'select', searchoptions: { value: ':All;' + prodValues, sopt: ['eq'] },
formatter: 'select', edittype: 'select', editoptions: { value: prodValues },
editrules: { required: true }
},
{
name: 'Environment', index: 'Environment', width: 100, sortable: true, editable: true,
stype: 'select', searchoptions: { value: ':All;' + envValues, sopt: ['eq'] },
formatter: 'select', edittype: 'select', editoptions: { value: envValues },
editrules: { required: true }
},
{
name: 'Hostname', index: 'Hostname', width: 200, sortable: true, editable: true,
editrules: { required: true }
},
{
name: 'IP', index: 'IP', width: 125, sortable: false, editable: true
},
{
name: 'Description', index: 'Description', width: 200, sortable: true, editable: true,
editrules: { required: true }
},
{
name: 'Type', index: 'Type', width: 75, sortable: true, editable: true,
stype: 'select', searchoptions: { value: ':All;' + typeValues, sopt: ['eq'] },
formatter: 'select', edittype: 'select', editoptions: { value: typeValues },
editrules: { required: true }
},
{ name: 'PortsUsed', index: 'PortsUsed', width: 80, sortable: false, editable: true },
{ name: 'DeletedFlag', index: 'DeletedFlag', hidden: true, searchoptions: { sopt: ['eq'], searchhidden: true }},
{
name: 'Decommissioned', index: 'DeletedFlag', width: 150, sortable: false, editable: false,
stype: 'select', searchoptions: { value: 'FALSE:No;TRUE:Yes' }/*, sorttype: 'date', datefmt: 'M/d/Y H:i:s A'*/
},
{ name: 'User', index: 'User', width: 75, sortable: true, editable: false }
],
rowNum: 10000, // show all rows hack (-1 is the proper way to do it but is bugged in this version of jqGrid)
pager: '#PSGridPager',
sortname: 'ID',
pgbuttons: false,
pgtext: null,
viewrecords: false,
sortorder: 'asc',
ignoreCase: true,
caption: 'Click a row to edit. [Enter] to save, [Esc] to cancel.',
loadonce: true,
/*jsonReader: {
pVals: "pVals",
eVals: "eVals",
tVals: "tVals"
},*/
onSelectRow: function (id) {
if (id && id !== lastsel) {
grid.jqGrid('restoreRow', lastsel);
lastsel = id;
}
grid.jqGrid('editRow', id, true);
},
/*beforeProcessing: function (data) {
var pVals = data.pVals;
grid.setColProp('Product', {
index: 'Product', width: 125, sortable: true, editable: true,
stype: 'select', searchoptions: { value: ':All;' + pVals, sopt: ['eq'] },
formatter: 'select', edittype: 'select', editoptions: { value: pVals },
editrules: { required: true }
});
}*/
});
grid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" });
grid.jqGrid('navGrid', '#PSGridPager', { edit: false, add: true, del: true, search: false, refresh: true, paging: false },
{ /* edit options */ },
{ /* add options */
closeOnEscape: true,
closeAfterAdd: true,
reloadAfterSubmit: true,
width: 400
},
{ /* delete options */
closeOnEscape: true,
reloadAfterSubmit: true
});
grid.jqGrid('navButtonAdd', '#PSGridPager', {
caption: "Export to Excel",
onClickButton: function () {
grid.jqGrid('excelExport', { url: "jqGridHandler.ashx" });
}
});
});
如果我尝试按原样使用 beforeProcessing，则 Product 列不显示过滤器并且不显示任何数据。