JQGrid:从过滤器恢复工具栏值和运算符

时间:2018-03-27 09:06:21

标签: javascript jquery jqgrid

我正在使用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\"}]}"

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

The JQgrid

有没有办法使用参数中传递的过滤器的值自动填充过滤器工具栏?我已经尝试过解析过滤规则,并用匹配的值填充输入,但我找不到恢复操作符的方法。

1 个答案:

答案 0 :(得分:1)

  1. 由于使用了Guriddo jGrid版本5.3,我们很高兴知道我们已经重写了our documentation。在这里你可以找到很多问题的答案。在您的情况下,您应该知道有一种方法可以完全按照您的要求进行操作。方法refreshFilterToolbar的名称。由于在方法的当前实现中,serchOperator没有考虑到我们已经在GitHub中修复了该方法以支持它们。
  2. 如果您在不支持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事件根据条件设置一些行的类。只有在没有其他方法可以执行此操作时才应使用此事件。在相对较大的数据集中使用此事件会导致读取缓慢,并且在某些情况下会导致挂起。应该非常谨慎地使用它。
    2. 在您的情况下,您可以使用 rowattr 事件来实现此目的。请在同一文档页面中阅读更多相关信息。不要忘记将gridview设置为true或其他单词

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