jqGrid：使用 beforeProcessing 填充 filterToolbar 选择框
Posted
技术标签:
【中文标题】jqGrid：使用 beforeProcessing 填充 filterToolbar 选择框【英文标题】：jqGrid: using beforeProcessing to populate filterToolbar selection boxes 【发布时间】：2013-06-28 17:53:56 【问题描述】：我在我的 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 列不会显示过滤器并且不显示任何数据。
【问题讨论】：
【参考方案1】：在我看来，您使用的代码已经几乎正确。最大的问题是您需要刷新 现有的过滤器工具栏。您可以使用我在the answer 中建议的destroyFilterToolbar 方法。我后来向 trirand 建议了它（参见 here 和 the pull request），它现在包含在 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 选项，这可能很有趣）
您可以将解决方案与我在the answer 中描述的函数refreshSerchingToolbar 的调用相结合，以在过滤器工具栏中加载旧过滤器。
顺便说一句，您可以考虑更改您使用的value 属性的格式。您可以使用对象形式Product1: "Product1", Product2:"Product2", etc: "etc"，而不是使用字符串形式"Product1:Product1;Product2:Product2;etc:etc"。
【讨论】：
奥列格，谢谢您的回复。当我使用您的 beforeProcessing 代码时，网格会挂在“正在加载...”阶段。我使用警报来查找问题的根源，当它尝试评估“cmXX.editoptions.value !== newXXValues”表达式时会发生这种情况。 setColProp 方法返回一个数组。这是访问它的正确方法吗？ 我想通了。将您的表达式更改为cmXX["editoptions"] !== newXXValues 成功了！
@pelotron：不客气！我没有测试代码——我只是在写答案的时候写的。所以它可能包含一些小错误。一般来说，cmXX["editoptions"] 与 javascript 中的 cmXX.editoptions 相同，并且首选最后一种形式。无论如何，我希望您可以配置您的代码，以便它现在可以工作。这是主要目标。以上是关于jqGrid：使用 beforeProcessing 填充 filterToolbar 选择框的主要内容，如果未能解决你的问题，请参考以下文章