可以重新加载网格数据（远程）并保留过滤器吗？

Posted 2021-04-19

我有一个按钮负责向DB添加新数据，然后我需要用新数据重新加载网格，但我想保留我之前应用的过滤器。这是函数的样子：

$('#create-link').on('submit', function (e) {
    e.preventDefault();

    $.ajax({
        url: '/ajax/plans_to_forms/save',
        data: $(this).serialize(),
        type: 'POST',
        dataType: 'json'
    }).done(function () {
        $grid.jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid');
    });
});

这一行：$grid.jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid');正在制作重新加载远程数据的技巧，但我正在丢失过滤器。

有没有办法在重新加载网格数据后保留它们，所以我回到以前的数据而不是所有的数据？

在添加新项目之前，已应用过滤器，一切看起来都很好：

添加新项目后，过滤器尚未应用，我获得了所有数据，因此我必须清除过滤器并再次设置它们：

注意：新项目属于同一计划，因此它应该出现在那里

答案

这是可能的，但问题包括许多小问题。首先应该了解重新加载和过滤是如何工作的，哪个jqGrid参数对此很重要，然后必须在程序中实现相应的小步骤。

第一个问题是在使用loadonce: true选项的情况下从服务器重新加载数据。您目前使用代码

$grid.jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid');

但免费的jqGrid允许这样做

$grid.trigger('reloadGrid', {fromServer: true});

或者。免费jqGrid在内部datatype选项中保存原始dataTypeOrg值（“json”，“jsonp”，“xml”等），如果使用选项datatype，它将从dataTypeOrg恢复fromServer: true。重要的是要理解局部过滤不再是重新加载具有datatype: 'local'的网格。因此，如果想要使用强大的本地排序和过滤从服务器加载的数据，就不应该在所有重载上使用fromServer: true（一个不应该永久使用reloadGridOptions: { fromServer: true }）。

第二个问题是在数据显示在jqGrid之前过滤从服务器返回的数据。这在旧的jqGrid中是不可能的，但是免费的jqGrid有选项forceClientSorting: true，它做的很厚。选项的名称不好，但我不想更改它，因为它已被使用。在从网络加载的数据的第一页之前强制本地排序和过滤数据的选项将显示在网格中。

下一个问题是使用过滤器中的数据填充过滤器工具栏，包括显示过滤器操作（如果使用searchOperators: true的filterToolbar选项）。默认情况下激活的选项loadFilterDefaults: true就是这样做的。它是一个额外的免费jqGrid选项，在旧的jqGrid中不存在。结果就像设置一样

postData: {
    filters: JSON.stringify({
            groupOp: "AND",
            groups: [],
            rules: [
                {field: "ship_via", op: "ne", data: "FedEx"},
                {field: "closed", op: "eq", data: true},
                {field: "name", op: "bw", data: "test"}
            ]
    })
},
search: true,
forceClientSorting: true

用于https://jsfiddle.net/OlegKi/hvwn1tf7/3/做所有，需要什么。

接下来应该考虑的事情主要是保存/恢复postData.filters并设置search: true，如果想要应用过滤器，但是它了解所有的工作原理，那么可以非常容易地实现所需的行为。