如何加载已应用过滤器的网格？

Question

我有一个 jqGrid，我希望能够加载已经应用的过滤器（可能会通过 URL 传递）。为了测试，我对过滤器进行了硬编码，但我无法让它工作。我正在尝试遵循here 的答案以使其正常工作。

我的网格代码（为简单起见删除了一些列）：

<script type="text/javascript">
$(function(){
    $("#users").jqGrid({
            datatype: 'json',
            url: 'myLoadURL',
            gridview: true,
            loadonce: true,
            colModel: [ 
                {name: 'lastname', label: 'Last Name'},
                {name: 'firstname', label: 'First Name'},
                {name: 'email', label: 'Email'}
              ],
            height:'auto',
            autowidth:true,
            caption:'Users',
            rowNum:20,
            rowList:[10,20,50],
            ignoreCase: true, // case-insensitive filtering
            pager: '#pager',
            postData: {
                filters: '{"groupOp":"AND",rules:[{"field":"lastname", "op":"cn", "data":"smith"},{"field":"firstname","op":"cn","data":"john"}]}' 
            },
            search:true
        });
    $("#users").jqGrid("filterToolbar", {searchOnEnter: false});
});
</script>

<table id="users"><tr><td></td></tr></table> 
<div id="pager"></div> 

在这种情况下，我试图过滤名字包含“John”和姓包含“Smith”的用户。但是，所有记录都已加载。如何获取要应用的初始过滤器值？

Answer 1

您有两种主要的方式来应用 本地 过滤器：

• 设置过滤器 (postData.filters) 和选项 search: true 并在第一次从服务器加载数据后直接重新加载 jqGrid。
• 使用单独的jQuery.ajax 调用从服务器加载数据并使用datatype: "local", data: dataReturnedFromServer, search: true, postData: {filters: ...} 创建网格。

网格中的总行数 16,000 相对较大，但如果您使用现代 Web 浏览器和最新版本的 jqGrid（例如 free jqGrid 4.10.0），它仍然可以足够快地显示出来。大量的列对于网格的性能也可能非常重要。

要遵循第一种方法，可以在网格中包含以下loadComplete 回调：

loadComplete: function () {
    var $this = $(this), p = $this.jqGrid("getGridParam");
    if (p.datatype === "json") {
        // we are loading the data from the server.
        // we should allow jqGrid to process loadComplete
        // till the end, change datatype to "local" and
        // only after that we should reload the grid once more
        // using locally sorted and filterd data
        setTimeout(function () {
            p.search = true;
            p.postData.filters = '{"groupOp":"AND",rules:[{"field":"lastname", "op":"cn", "data":"smith"},{"field":"firstname","op":"cn","data":"john"}]}';
            $this.triggerHandler("reloadGrid");
        }, 50);
    }
}

您可以通过最初使用rowNum:1 并在重新加载之前设置p.rowNum = 20; 来提高一点性能。第一种方法的唯一缺点是网格内容的轻弹。