jqGrid: utilizando beforeProcessing para rellenar cuadros de selección filterToolbar

Estoy rellenando tres cuadros desplegables en mi filterToolbar con datos del servidor, que se muestran en la statement de prodValues, envValues ​​y typeValues ​​a continuación. Me gustaría cambiar mi código para realizar esta operación en el evento beforeProcessing y extraer los valores del volcado de datos de la grilla principal. Ya tengo el servidor enviando lo que creo que es la respuesta JSON adecuada para hacer esto:

{ "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 */ ] } 

¿Cómo puedo elegir las cadenas pVals, eVals y tVals en el evento beforeProcessing y pegarlas en los cuadros de selección filterToolbar correspondientes?

Aquí está mi código de cuadrícula para referencia, con mis bashs fallidos de resolver este problema comentados:

 $(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('restreRow', 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" }); } }); }); 

Si trato de utilizar BeforeProcessing como está, la columna Producto no muestra un filtro y no muestra datos.

Me parece que usas un código casi correcto. El mayor problema es que necesita actualizar la barra de herramientas de filtro existente. Puedes usar el método destroyFilterToolbar que sugerí en la respuesta . Lo sugerí más tarde para trirand (ver aquí y la solicitud de extracción ) y ahora está incluido en el código principal de jqGrid. Tu código puede ser como a continuación.

 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 nuevos searchOperators: true opción searchOperators: true que podría ser interesante)

Puede combinar la solución con la llamada de la función refreshSerchingToolbar que describí en la respuesta para cargar el filtro anterior en la barra de herramientas de filtro.

Por cierto, puede considerar cambiar el formato de propiedad de value que usa. En lugar de cadena de uso de "Product1:Product1;Product2:Product2;etc:etc" , puede usar el formulario de objeto {Product1: "Product1", Product2:"Product2", etc: "etc"} .