jqGrid：使用beforeProcessing填充filterToolbarselect框
我正在使用服务器中的数据在我的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和tValsstring，并将它们粘贴到相应的filterToolbarselect框中？
这里是我的网格代码供参考，我的破解企图解决这个问题的评论：
$(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/YH: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，那么产品列不会显示filter，也不会显示任何数据。
在我看来，你已经使用了几乎正确的代码。 最大的问题是你需要刷新现有的filter工具栏。 你可以使用我在答案中提出的destroyFilterToolbar方法。 我后来build议它trirand（请参阅这里和拉请求 ），它现在包含在jqGrid的主代码中。 你的代码可以如下所示。
beforeProcessing: function (data) { var $self = $(this), newProductValues = data.pVals, newEnvironmentValues = data.eVals, newTypeValues = data.tVals, cmProduct = $self.jqGrid("getColProp, "Product"), cmEnvironment = $self.jqGrid("getColProp, "Environment"), cmType = $self.jqGrid("getColProp", "Type"), isChanged = false; if (cmProduct.editoptions.value !== newProductValues) { $self.jqGrid("setColProp", "Product", { searchoptions: { value: ":All;" + newProductValues }, editoptions: { value: newProductValues } }); isChanged = true; } if (cmEnvironment.editoptions.value !== newEnvironmentValues) { $self.jqGrid("setColProp", "Environment", { searchoptions: { value: ":All;" + newEnvironmentValues }, editoptions: { value: newEnvironmentValues } }); isChanged = true; } if (cmType.editoptions.value !== newTypeValues) { $self.jqGrid("setColProp", "Environment", { searchoptions: { value: ":All;" + newTypeValues }, editoptions: { value: newTypeValues } }); isChanged = true; } if (isChanged) { // recreate filter toolbar to refresh the data $self.jqGrid("destroyFilterToolbar"); $self.jqGrid("filterToolbar", { stringResult: true, searchOnEnter: true, searchOperators: true, defaultSearch: "cn" }); } }
（我包括新的searchOperators: true选项可能是intresting）
您可以将解决scheme与函数refreshSerchingToolbar的调用相结合，我在回答中描述了在filter工具栏中加载旧的filter。
顺便说一下，你可以考虑改变你使用的value属性的格式。 您可以使用对象forms{Product1: "Product1", Product2:"Product2", etc: "etc"}而不是使用stringforms"Product1:Product1;Product2:Product2;etc:etc"
