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”的firstname和包含“Smith”的lastname的用户进行过滤。但是，所有记录都已加载。如何获取要应用的初始过滤器值？

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），它仍然可以足够快地显示。大量的列对于网格的性能也非常重要。

要遵循fisrt方法，可以在网格中包含以下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;。第一种方法的唯一缺点是网格内容的轻微滑动。

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

1 个答案: