jqGrid：使用beforeProcessing填充filterToolbar选择框

Question

我用来自服务器的数据填充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事件中挑选pVal，eVal和tVals字符串并将其粘贴到相应的filterToolbar选择框中？

Answer 1

在我看来，您已经使用了几乎正确的代码。最大的问题是您需要刷新现有的过滤器工具栏。您可以使用destroyFilterToolbar我在答案中建议的方法。稍后我向trirand提出了建议（请参阅此处和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可能引人入胜的新选项）

您可以将解决方案与refreshSerchingToolbar我在答案中描述的函数调用结合使用，以将旧过滤器加载到过滤器工具栏中。

顺便说一句，您可以考虑更改value使用的属性的格式。除了使用字符串形式，"Product1:Product1;Product2:Product2;etc:etc"还可以使用对象形式{Product1: "Product1", Product2:"Product2", etc: "etc"}。

Answer 2

不客气！我没有测试代码-我只是在编写答案时编写了代码。因此它可能包含一些小错误。通常，cmXX["editoptions"]它与cmXX.editoptionsJavaScript中的相同，并且最好使用最后一种形式。无论如何，我都希望您可以配置您的代码，使其现在可以工作。这是主要目标。