代码之家 › 专栏 › 技术社区 › ReynierPM

是否可以重新加载网格数据(远程)并保留过滤器?

free-jqgrid jqgrid jquery

1

ReynierPM · 技术社区 · 8 年前

我有一个按钮,负责向数据库中添加新数据,然后我需要用新数据重新加载网格,但我希望保留以前应用的过滤器。函数的外观如下所示:

$('#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'); 正在尝试重新加载远程数据,但我正在松开过滤器。

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

添加新项目之前,已应用过滤器,一切正常:

添加新项目后,过滤器尚未应用,我获得了所有数据,因此我必须清除过滤器并重新设置:

注意:新项目属于同一计划,因此应显示在那里

1 回复 | 直到 8 年前

1

2

Oleg 8 年前

这是可能的,但问题是由许多小问题组成的。人们应该首先了解重新加载和过滤是如何工作的,哪些jqGrid参数对其很重要,然后必须在程序中实现相应的小步骤。

第一个问题是在使用 loadonce: true 选项您当前使用的代码

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

但免费jqGrid允许

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

或者。免费jqGrid保存原始 datatype 内部文件中的值(“json”、“jsonp”、“xml”等) 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 如果一个人想应用过滤器,但他了解所有的工作原理,那么他可以很容易地实现所需的行为。