javascript - JQ网格: restoring toolbar values and operators from filter

Question

我正在使用 JQGrid(5.3.0 版)显示动态表中的值(我事先不知道列号和列名)。我从对服务器的 ajax 调用中检索列架构，以及需要应用于网格的过滤器，并从那里创建 JQGrid。

我面临的问题是我找不到从传递到表的过滤器中正确地重新填充过滤器工具栏的方法。

代码如下:

$.ajax({
    url: {url to get columns and filter},
    type: 'POST',
    postData: { productID: 98 }
    success: function (result) {
        if (result) {
            $('#grid').jqGrid({
                url: {url to get data},
                datatype: 'json',
                search: true,
                postData: { productID: 98, filters: result.filter },
                myType: 'GET',
                colModel: result.columns,
                jsonReader: {
                    root: 'Data',
                    page: 'Page',
                    total: 'Total',
                    records: 'PageSize'
                },
                pager: $('#gridpager'),
                rowNum: 25,
                gridview: false,
                afterInsertRow: function (rowid, rowdata, rowelem) {
                    var color = rowelem.Color;
                    if (color != 'white') {
                        $("tr.jqgrow#" + rowid).addClass("color-" + color);
                    }
                },
            }).filterToolbar({
                groupOp: 'AND',
                defaultSearch: "cn",
                searchOnEnter: true,
                searchOperators: true,
                stringResult: true,
            });
        }
    }
});

这是 Columns 模型的示例:

[
    {
        "name":"DESCRIPTION",
        "label":"Description",
        "searchoptions":
        {
            "sopt": ["bw","cn","nc","ew","eq","ne","in"],
            "attr":{"class":"glyphicon glyphicon-filter"}
        }
    },
    {
        "name":"SKU_CODE",
        "label":"SKU Code",
        "searchoptions":
        {
            "sopt":["bw","cn","nc","ew","eq","ne","in"],
            "attr":{"class":"glyphicon glyphicon-filter"}
        }
    },
    {...}
]

这是过滤器:

"{\"groupOp\":\"AND\",\"rules\":[{\"field\":\"DESCRIPTION\",\"op\":\"bw\",\"data\":\"D\"}]}"

执行此代码时，从我的数据源加载数据，应用过滤器，但过滤器栏保持为空。

有没有一种方法可以使用传入参数的过滤器中的值自动填充过滤器工具栏？我已经尝试解析过滤规则，并用匹配值填充输入，但我找不到恢复运算符的方法。

Answer 1

1. 由于使用了 Guriddo jGrid 5.3 版，很高兴知道我们已经重写了 our documentation .在这里您可以找到很多问题的答案。在您的情况下，您应该知道有一种方法可以完全满足您的需求。方法名称 refreshFilterToolbar .由于在该方法的当前实现中未考虑 serchOperator，我们已在 GitHub 中修复该方法以支持它们。

如果您使用不支持 searchOperators 的现有方法，您的代码应该像这样:

$("#grid").jqGrid({
...
}).filterToolbar({
    groupOp: 'AND',
    defaultSearch: "cn",
    searchOnEnter: true,
    searchOperators: true,
    stringResult: true
}).refreshFilterToolbar({"filters": result.filter});

如果你使用来自 github 的支持 searchOperators 的版本，你的代码应该是这样的

$("#grid").jqGrid({
...
}).filterToolbar({
    groupOp: 'AND',
    defaultSearch: "cn",
    searchOnEnter: true,
    searchOperators: true,
    stringResult: true
}).refreshFilterToolbar();

注意我们没有传递filter参数，它是自动获取的。

1. 我看到您使用 afterInsertRow 事件根据条件设置行的某个类。仅当没有其他方法可以执行此操作时才应使用此事件。在相对大的数据集中使用此事件会导致读取缓慢，在某些情况下会导致挂起。应该非常小心地使用它。

在您的情况下，您可以为此目的使用 rowattr 事件。请在同一文档页面中阅读更多相关信息。不要忘记将 gridview 设置为 true 或换句话说

...
rowNum: 25,
gridview: true,
rowattr: function (rowdata, rowelem) {
    var color = rowelem.Color;
    if (color != 'white') {
        return { "class" : "color-" + color};
    }
},