search - jqGrid 过滤记录

Question

似乎这里有一些关于这个主题的问题，他们有一些很好的答案，但似乎我的情况有点不同。我需要过滤 jqGrid 中显示的记录，但完全是客户端。

出于多种原因，对我来说填充网格的最佳方式是使用一个数组，该数组直接发送到页面上的 JavaScript 中。网格本身根本不与服务器交互。我在各种网格事件中发生了一些自定义 AJAX，但仅此而已。 (基本上，我将其与现有的一组无法显着改变的可用服务集成。)

我要做的是根据简单的文本输入和按钮过滤网格。我的页面有文本输入、按钮和一个表格(它成为文档准备好的网格)。我想绑定(bind)到按钮的单击事件(普通的 jQuery 事件绑定(bind)，没什么特别的)，并使用来自文本输入的值作为 jqGrid 上的显示过滤器。

通过“过滤器”，我的意思是只显示与输入中的文本匹配(在任何字段中)的记录。然后，要显示所有记录，只需清空输入并再次单击按钮。此外，网格是多选的，选择需要通过过滤保持。我只需要能够隐藏与输入内容不匹配的行。

这可能吗？

Answer 1

要过滤本地网格，您应该只填写 filters postData 的属性(property)jqGrid的参数并额外设置search:true .

要保存对网格的选择，您可以使用 reloadGrid带附加参数 [{page:1,current:true}] (见 here)。

对应的代码可以如下

$("#search").click(function() {
    var searchFiler = $("#filter").val(), grid = $("#list"), f;

    if (searchFiler.length === 0) {
        grid[0].p.search = false;
        $.extend(grid[0].p.postData,{filters:""});
    }
    f = {groupOp:"OR",rules:[]};
    f.rules.push({field:"name",op:"cn",data:searchFiler});
    f.rules.push({field:"note",op:"cn",data:searchFiler});
    grid[0].p.search = true;
    $.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
    grid.trigger("reloadGrid",[{page:1,current:true}]);
});

我做了 the demo对于您过滤“客户”(“名称”)和“注释”(“注释”)两列的过滤器，您可以扩展代码以在您需要的所有列中进行搜索。

取决于您对保存行选择的确切含义，您可能需要从 selarrrow 保存当前选择在变量中并恢复关于 setSelection 的选定行方法。