jqGrid 尝试在创建网格时应用过滤器

Question

我有一个包含以下过滤字符串的对象：

prefs.filters={"groupOp":"AND","rules":[{"field":"FirstName","op":"cn","data":"max"}]}

这是我的网格创建，我试图在 postData 设置中应用过滤器：

        // Set up the jquery grid
        $("#jqGridTable").jqGrid(
            {
                // Ajax related configurations
                url: jqDataUrl,
                datatype: "json",
                mtype: "GET",
                autowidth: true,

                // Configure the columns
                colModel: columnModels,

                // Grid total width and height
                height: "100%",

                // customize jqgrid post init
                gridComplete: function()
                {
                    CRef.updateJqGridPagerIcons("jqGridTable");
                },

                // Paging
                toppager: true,
                rowNum: 20,
                rowList: [5, 10, 20, 50, 100],
                viewrecords: true, // Specify if "total number of records" is displayed

                // Default sorting
                sortname: typeof prefs.sortCol !== "undefined" ? prefs.sortCol : "LastName",
                sortorder: typeof prefs.sortCol !== "undefined" ? prefs.sortOrd :  "asc",
                sorttype: "text",
                sortable: true,

                postData: typeof prefs.filters !== "undefined" ? { filters: prefs.filters } : {},
                //also tried this...
                //postData: typeof prefs.filters !== "undefined" ? { JSON.stringify(filters: prefs.filters) } : {},

 //remaining property settings excluded from post to keep short.

更新：在网格上使用 .navGrid 如下：

.navGrid("#jqGridTable",
                { refresh: true, add: false, edit: false, del: false, refreshtitle: getRefreshText('@Model.Instruction'), searchtitle: searchText },
                {}, // settings for edit
                {}, // settings for add
                {}, // settings for delete
                { closeAfterSearch: true, closeOnEscape: true, multipleSearch: true, multipleGroup: true });

创建网格时，不会应用 postData 中的过滤器。我还尝试在初始创建后触发重新加载事件，并且也没有应用过滤器。

从其他帖子中，我相信我走在正确的道路上，但似乎遗漏了一些东西。

cmets 后更新：

我将以下代码添加到 loadComplete...

if ($("#jqGridTable").jqGrid("getGridParam", "datatype") === "json") {
    setTimeout(function () {

        $("#jqGridTable").jqGrid("setGridParam", {
            datatype: "local",
            postData: { filters: prefs.filters, sord: prefs.sortOrd, sidx: prefs.sortCol },
            search: true
        });

        $("#jqGridTable").trigger("reloadGrid");
    }, 50);
}

它成功地保留了过滤器。 :)

但是，现在我遇到了有趣的问题副作用。我可以对列进行排序，并且某些列会更改为正确地按 asc/desc 排序，但是当我转到其他列进行排序时，它们会按照它们最初加载的顺序进行排序，既不是 asc 也不是 desc。

Answer 1

如果你想应用filters，你必须设置jqGrid的search: true选项。此外，您使用datatype: "json"。这意味着filters 将被发送到服务器，您的服务器代码必须解码过滤器并在那里使用。再说一句。 postData 的正确值是 { filters: JSON.stringify(prefs.filters) }。

更新：我建议您升级到最新版本 (4.12.1) 或 free jqGrid。它是我自 2014 年底以来开发的 jGrid 的分支。要使用免费的 jqGrid，您只需将 jqGrid 文件的 URL 更改为the wiki article 中描述的 URL。之后，您可以使用以下选项：

loadonce: true,
forceClientSorting: true,
search: true,
postData: { filters: prefs.filters },
sortname: prefs.sortCol,
sortorder: prefs.sortOrd

并删除您在问题的“更新后更新”部分中发布的loadComplete 代码。免费的jqGrid会加载从服务器返回的所有数据，应用过滤器prefs.filterslocally，将结果排序locally并显示结果的第一页（基于页面大小rowNum: 20)。

The old demo从服务器加载the JSON data，在本地对数据进行排序，通过isFinal === 1过滤，最后显示第一页结果。该演示使用sortfunc、additionalProperties 进行额外的自定义排序，允许在本地data 中保存额外的属性。

您还可以将reloadGridOptions: { fromServer: true } 添加到您使用的navGrid 的其他选项中（refresh: true, add: false, ...）。如果用户单击该按钮，它将更改导航栏的刷新按钮的行为，以从服务器重新加载数据。有关免费 jqGrid 和 loadonce: true 的新选项的更多信息，请参阅我今天发布的 another answer。