jqGrid:使用 beforeProcessing 填充 filterToolbar 选择框 [英] jqGrid: using beforeProcessing to populate filterToolbar selection boxes
问题描述
我正在用来自服务器的数据填充我的 filterToolbar 中的三个下拉框，如下面的 prodValues、envValues 和 typeValues 声明所示.我想更改我的代码以在 beforeProcessing 事件中执行此操作并从主网格数据转储中提取值.我已经让服务器发送我认为正确的 json 响应来执行此操作:
I am populating three dropdown boxes in my filterToolbar with data from the server, shown in the declaration of prodValues, envValues, and typeValues below. I would like to change my code to perform this operation in the beforeProcessing event and pull the values from the main grid data dump. I already have the server sending what I think is the proper json response to do this:
{
"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 选择框中?
How can I pick out the pVals, eVals, and tVals strings in the beforeProcessing event and stick them into the corresponding filterToolbar selection boxes?
这是我的网格代码供参考，我尝试解决这个问题的失败被注释掉了:
Here is my grid code for reference, with my broken attempts to solve this problem commented out:
$(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，则产品列不会显示过滤器，也不会显示任何数据.
If I try to use beforeProcessing as is, the Product column does not display a filter and shows no data.
推荐答案
在我看来，您使用的代码几乎是正确的.最大的问题是您需要刷新现有的过滤器工具栏.您可以使用我在 答案 中建议的 destroyFilterToolbar 方法.我后来向 trirand 推荐了它(见 这里 和拉取请求) 并且它现在包含在 jqGrid 的主要代码中.您的代码可以如下所示.
It seems to me that you use already almost correct code. The most problem is that you need refresh existing filter toolbar. You can use destroyFilterToolbar method which I suggested in the answer. I suggested it later to trirand (see here and the pull request) and it's included in the main code of jqGrid now. Your code can be like below.
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 选项，这可能很有趣)
(I included new searchOperators: true option which could be intresting)
您可以将该解决方案与我在答案中描述的refreshSerchingToolbar 函数的调用结合起来a> 在过滤器工具栏中加载旧过滤器.
You can combine the solution with the call of the function refreshSerchingToolbar which I described in the answer to load old filter in the filter toolbar.
顺便说一下，您可以考虑更改您使用的 value 属性的格式.代替使用字符串形式 "Product1:Product1;Product2:Product2;etc:etc" 你可以使用对象形式 {Product1: "Product1", Product2:"Product2", etc: "etc"}.
By the way you can consider to change format of value property which you use. Instead of usage string form "Product1:Product1;Product2:Product2;etc:etc" you can use object form {Product1: "Product1", Product2:"Product2", etc: "etc"}.
这篇关于jqGrid:使用 beforeProcessing 填充 filterToolbar 选择框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
