Jquery jqGrid：使用beforeProcessing填充filterToolbar选择框

我用服务器的数据填充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列不会显示筛选器，也不会显示任何数据。

在我看来，您使用的代码几乎已经正确。最大的问题是，您需要刷新现有的过滤器工具栏。您可以使用我在中建议的

destroiltertoolbar

方法。我后来向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

选项，该选项可能很有趣）

您可以将解决方案与调用函数

refreshSerchingToolbar

相结合，我在中介绍了该函数以在过滤器工具栏中加载旧过滤器

---

<>您可以考虑更改使用的<代码>值< /代码>属性。您可以使用对象形式

{Product1:“Product1”，Product2:“Product2”，etc:“etc”

而不是使用字符串形式

{Product1:“Product1”，Product2:“Product2”，etc:“etc”}

Oleg，谢谢您的回复。当我使用预处理代码时，网格挂起在“加载…”阶段。我使用警报来查找问题的根源，当它尝试计算“cmXX.editoptions.value！==newxxValue”表达式时，问题就会出现。setColProp方法返回一个数组。这是访问它的正确方式吗？我找到了。将表达式更改为

cmXX[“编辑选项”]！==newXXValues

成功了@佩洛顿：不客气！我没有测试代码——我只是在写答案的时候写的。因此它可能包含一些小错误。通常，

cmXX[“editoptions”]

与JavaScript中的

cmXX相同。editoptions

是首选格式。无论如何，我希望您可以配置您的代码，使它现在就可以工作。这是主要目标。