JqG​​rid本地过滤器不起作用

Question

以下代码不适用于本地数据的过滤器工具栏。

请帮我解决这个问题。 我是 jqgrid 的新手。我正在尝试使我的网格在本地进行过滤。以下代码取自小提琴中给出的示例之一。

我即将做同样的事情，但发生的事情是，我的网格中有两个过滤器。如果我选择两个过滤器，那么只有网格正确过滤数据。但是如果我只选择一个过滤器，那么网格就不会得到过滤器。尽管第二个过滤器的值为“无过滤器”

var serverResponse = [
    {id: 10,  label: 10, value: "Abc"},
    {id: 20,  label: 20, value: "Xyz"},
    {id: 30,  label: 30, value: "Abc"},
    {id: 40,  label: 40, value: "Xyz"},
    {id: 50,  label: 50, value: "Abc"},
    {id: 60,  label: 60, value: "Abc"},
    {id: 70,  label: 70, value: "Xyz"},
    {id: 80,  label: 90, value: "Abc"},
    {id: 90,  label: 10, value: "Xyz"},
    {id: 100, label: 20, value: "Abc"},
    {id: 110, label: 10, value: "Abc"},
    {id: 120, label: 30, value: "Xyz"},
    {id: 130, label: 10, value: "Abc"},
    {id: 140, label: 60, value: "Xyz"},
    {id: 150, label: 10, value: "Abc"}
];


$("#grid").jqGrid({
    url: "/echo/json/", // use JSFiddle echo service
    postData: {
        json: JSON.stringify(serverResponse) // needed for JSFiddle echo service
    },
    mtype: "POST", // needed for JSFiddle echo service
    datatype: "json",
    colNames: ["Label", "Value"],
    colModel: [
        {name: "label", width: 70, template: "integer" },
        {name: "value", width: 200 }    
    ],
    loadonce: true,
    pager: true,
    rowNum: 10,
    rowList: [5, 10, "10000:All"],
    iconSet: "fontAwesome",
    cmTemplate: { autoResizable: true },
    shrinkToFit: false,
    autoResizing: { compact: true },
    beforeProcessing: function (data) {
        var labelMap = {}, valueMap = {}, i, item, labels = ":All", values = [], $self = $(this);
        for (i = 0; i < data.length; i++) {
            item = data[i];
            if (!labelMap[item.label]) {
                labelMap[item.label] = true;
                labels += ";" + item.label + ":" + item.label;
            }
            if (!valueMap[item.value]) {
                valueMap[item.value] = true;
                values.push(item.value);
            }
        }
        $self.jqGrid("setColProp", "label", {
            stype: "select",
            searchoptions: {
                value: labels,
                sopt: ["eq"]
            }
        });
         $self.jqGrid("setColProp", "value", {
            stype: "select",
            searchoptions: {
                value: values,
                sopt: ["eq"]
            }
        });

        // one should use stringResult:true option additionally because
        // datatype: "json" at the moment, but one need use local filtreing later
        $self.jqGrid("filterToolbar", {stringResult: true });
    }
});

Answer 1

首先可以看到，您获得了为 JFSiddle 创建的代码，该代码使用 JSFiddle 的 Echo 服务，并且您尝试使用 if whiteout JSFiddle。这是错的。如果您需要使用 本地 数据 (datatype: "local")，则应删除对 Echo 服务的引用。

对应的代码如下所示

$(function () {
    "use strict";
    var mydata = [
        {id: 10,  label: 10, value: "Abc"},
        {id: 20,  label: 20, value: "Xyz"},
        {id: 30,  label: 30, value: "Abc"},
        {id: 40,  label: 40, value: "Xyz"},
        {id: 50,  label: 50, value: "Abc"},
        {id: 60,  label: 60, value: "Abc"},
        {id: 70,  label: 70, value: "Xyz"},
        {id: 80,  label: 90, value: "Abc"},
        {id: 90,  label: 10, value: "Xyz"},
        {id: 100, label: 20, value: "Abc"},
        {id: 110, label: 10, value: "Abc"},
        {id: 120, label: 30, value: "Xyz"},
        {id: 130, label: 10, value: "Abc"},
        {id: 140, label: 60, value: "Xyz"},
        {id: 150, label: 10, value: "Abc"}
    ];

    $("#grid").jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["Label", "Value"],
        colModel: [
            {name: "label", width: 70, template: "integer" },
            {name: "value", width: 200 }    
        ],
        pager: true,
        rowNum: 10,
        rowList: [5, 10, "10000:All"],
        iconSet: "fontAwesome",
        cmTemplate: { autoResizable: true },
        shrinkToFit: false,
        autoResizing: { compact: true }
    }).jqGrid("filterToolbar");
});

查看演示https://jsfiddle.net/0bfnt8ym/

如果您想创建具有唯一值的选择，那么您可以在创建网格之前执行此操作：

$(function () {
    "use strict";
    var mydata = [
        {id: 10,  label: 10, value: "Abc"},
        {id: 20,  label: 20, value: "Xyz"},
        {id: 30,  label: 30, value: "Abc"},
        {id: 40,  label: 40, value: "Xyz"},
        {id: 50,  label: 50, value: "Abc"},
        {id: 60,  label: 60, value: "Abc"},
        {id: 70,  label: 70, value: "Xyz"},
        {id: 80,  label: 90, value: "Abc"},
        {id: 90,  label: 10, value: "Xyz"},
        {id: 100, label: 20, value: "Abc"},
        {id: 110, label: 10, value: "Abc"},
        {id: 120, label: 30, value: "Xyz"},
        {id: 130, label: 10, value: "Abc"},
        {id: 140, label: 60, value: "Xyz"},
        {id: 150, label: 10, value: "Abc"}
    ],
    buildUniqueValues = function (data, propName) {
        var i, item, valueMap = {}, values = [":All"], dataLength = data.length, value, lowCaseValue;
        for (i = 0; i < dataLength; i++) {
            value = data[i][propName];
            if (value !== undefined) {
                lowCaseValue = typeof value === "string" ? value.toLowerCase() : value;
                if (valueMap[lowCaseValue] === undefined) {
                    valueMap[lowCaseValue] = lowCaseValue;
                    values.push(lowCaseValue + ":" + value);
                }
            }
        }
        return values.join(";");
    };

    $("#grid").jqGrid({
        datatype: "local",
        data: mydata,
        colNames: ["Label", "Value"],
        colModel: [
            { name: "label", width: 70, template: "integer",
                stype: "select",
                searchoptions: {
                    value: buildUniqueValues(mydata, "label"),
                    sopt: ["eq", "ne"]
                } },
            { name: "value", width: 200,stype: "select",
                searchoptions: {
                    value: buildUniqueValues(mydata, "value"),
                    sopt: ["eq", "ne"]
                } }    
        ],
        pager: true,
        rowNum: 10,
        rowList: [5, 10, "10000:All"],
        iconSet: "fontAwesome",
        cmTemplate: { autoResizable: true },
        shrinkToFit: false,
        autoResizing: { compact: true }
    }).jqGrid("filterToolbar");
});

查看演示https://jsfiddle.net/OlegKi/0bfnt8ym/2/