jqGrid 过滤记录 [英] jqGrid Filtering Records

问题描述

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

It seems there have been a few questions here regarding this subject, and they have some great answers, but it seems that my case is a little different. I need to filter the records displayed in a jqGrid, but entirely client-side.

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

For a number of reasons, the best way for me to populate my grid is with an array that's emitted directly into the JavaScript on the page. The grid itself doesn't interact with the server at all. I have some custom AJAX happening in various grid events, but that's it. (Basically, I'm integrating this with an existing set of available services which can't change significantly.)

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

What I'm looking to do is filter the grid based on a simple text input and button. My page has the text input, the button, and a table (which becomes the grid on document ready). I'd like to bind to the click event of the button (normal jQuery event binding, nothing special) and use the value from the text input as a display filter on the jqGrid.

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

By "filter" I mean to display only the records which contain a match (in any field) for the text in the input. Then, to display all records, just empty the input and click the button again. Additionally, the grid is multi-select and the selections need to persist through filtering. I just need to be able to hide the rows which don't match what's in the input.

这可能吗?

推荐答案

要过滤局部网格，您只需填写 jqGrid 的 postData 参数的 filters 属性并另外设置search:true.

To filter local grid you should only fill filters property of the postData parameter of jqGrid and set additionally search:true.

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

To save selection of the grid you can use reloadGrid with additional parameter [{page:1,current:true}] (see 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}]);
});

我为您制作了演示，用于过滤两列'Client' ('name') 和 'Notes' ('note') 您可以扩展代码以在您需要的所有列中进行搜索.

I made the demo for you which filter for two columns 'Client' ('name') and 'Notes' ('note') you can extend the code to search in all columns which you need.

根据您对保存行选择的确切含义，您可能需要从 selarrrow 并根据 setSelection 方法.

Depend on what you exactly mean with the saving row selection you can need to save the current selection from the selarrrow in a variable and restore the selected rows with respect of setSelection method.

这篇关于jqGrid 过滤记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！