如何在 JqGrid 中保留过滤器，同时仍然获取远程数据？答案

【问题标题】：How do I retain filters in JqGrid whilst still getting remote data?如何在 JqGrid 中保留过滤器，同时仍然获取远程数据？
【发布时间】：2013-10-28 15:27:34
【问题描述】：

我正在使用this demo 在 JqGrid 的列中显示文本和下拉列表过滤器。网格有一个远程数据源，每次排序、过滤或页面查看等，它都会从远程源获取数据。

我遇到的问题是，当新数据到达时，网格会刷新，过滤器会恢复为默认值。我看过 Oleg 博士的几个例子，但我无法让它与远程数据和持久性一起工作。 datatype 到 "local" 或 loadonce 到 true 的任何设置都会破坏远程数据源。

有没有人知道如何让它发挥作用？

我尝试了以下方法，但正如我所说，这会阻止 JqGrid 发出 API 请求：

loadComplete: function () {
    var $this = $(this);
    var postfilt = $this.jqGrid('getGridParam', 'postData').filters;
    var postsord = $this.jqGrid('getGridParam', 'postData').sord;
    var postsort = $this.jqGrid('getGridParam', 'postData').sidx;
    var postpage = $this.jqGrid('getGridParam', 'postData').page;

    console.log(postfilt);
    console.log(postsord);
    console.log(postsort);
    console.log(postsort);*/

    if ($this.jqGrid("getGridParam", "datatype") === "json") {
        setTimeout(function () {
            $this.jqGrid("setGridParam", {
                datatype: "local",
                postData: { filters: postfilt, sord: postsord, sidx: postsort },
                search: true
            });
            $this.trigger("reloadGrid", [{ page: postpage}]);
        }, 25);
    }
}

我认为这个问题与select2 下拉菜单有关。在这里您可以看到它破坏了过滤器菜单并重新创建它。

var options = colModelOptions, p, needRecreateSearchingToolbar = false;
if (options != null) {
    for (p in options) {
        if (options.hasOwnProperty(p)) {
            if (options[p].edittype === "select") {
                options[p].editoptions.dataInit = initSelect2;
            }
            if (options[p].stype === "select") {
                options[p].searchoptions.dataInit = initSelect2;
            }
            $grid.jqGrid("setColProp", p, options[p]);
            if (this.ftoolbar) { // filter toolbar exist
                needRecreateSearchingToolbar = true;
            }
        }
    }
    if (needRecreateSearchingToolbar) {
        $grid.jqGrid("destroyFilterToolbar");
        $grid.jqGrid("filterToolbar", filterToolbarOptions);
    }
}

如果有一种方法可以在每次 JqGrid 加载而不是每次请求时执行一次，那么这可能是朝着正确方向迈出的一步。

【问题讨论】：

“新数据何时到来”是什么意思？谁初始化网格中数据的新加载？你把过滤器放在哪里？您是希望仅搜索工具栏的选择和输入保留以前的值，还是希望过滤器应用于新加载的数据？
对不起，我没说清楚。我将datatype 设置为json 并将url 设置为API。默认情况下，过滤器为空。当任何页面发生更改或设置过滤器时，JqGrid 会向我的 API 发出请求并更新数据。不幸的是，当它这样做时，它还会将过滤器重置为空。这就是我要坚持的。

标签： jqgrid

【解决方案1】：

这个问题的答案很简单，只是直到第二天早上才出现在我面前。我只是将构建搜索栏的代码包装在一个布尔检查中，以便它只加载一次。

// somewhere in the class
var gridLoaded = false;

// and in the JqGrid initialization 
loadComplete: function (response) {
    if (!gridLoaded) {
        var options = colModelOptions, p, needRecreateSearchingToolbar = false;
        if (options != null) {
            for (p in options) {
                console.log(p);
                if (options.hasOwnProperty(p)) {
                    if (options[p].edittype === "select") {
                        options[p].editoptions.dataInit = initSelect2;
                    }
                    if (options[p].stype === "select") {
                        options[p].searchoptions.dataInit = initSelect2;
                    }
                    $(this).jqGrid("setColProp", p, options[p]);
                    if (this.ftoolbar) { // filter toolbar exist
                        needRecreateSearchingToolbar = true;
                    }
                }
            }
            if (needRecreateSearchingToolbar) {
                $(this).jqGrid("destroyFilterToolbar");
                $(this).jqGrid("filterToolbar", filterToolbarOptions);
            }
        }
        gridLoaded = true;
    }
}

再次感谢 Oleg 博士的帮助。

【讨论】：