jqgrid的通用搜索字段

问题描述

我是jqgrid的新手，我发现有四种方法可以在jqgrid中实现搜索:

I'm new to jqgrid and I found out that there are four ways to implement a search in jqgrid:

a toolbar searching
a custom searching
a single field searching
a more complex approach involving many fields and conditions - advanced searching

我想知道是否有可能实现通用搜索的谷歌风格"，在这种情况下，您只有一个用于搜索查询的文本字段.如果我要向该字段写入内容，它将尝试从网格中的所有数据中进行搜索.

I'd like to know if it's possible to implement a "google style" of universal search where you would only have one text field for search query. If I would write something to that field, it would try to search from all the data in the grid.

编辑:我想一次获取所有数据，然后使用该本地数据集进行搜索.

EDIT: I would like to fetch all the data once and use the search for that local data set.

请参阅附件图片.

推荐答案

有很多方法可以实现这种要求.我准备了两个演示，演示了一个可能的解决方案:第一个演示和下一个.我在其中使用具有启发性的jQuery插件，就像我在此处描述它的方式一样.

There are many ways to implement such requirement. I prepared two demos which demonstrates one from the possible solution: the first one and the next one. The second demo in enhanced version of the first one where I use higlighting jQuery plugin in the same way like I describe it here.

首先，我将带有按钮的输入框添加到网格的顶部工具栏.我使用toolbar: [true, "top"]在网格顶部添加一个空的工具栏.然后我用下面的代码

First of all I add input box with the button to the top toolbar of the grid. I use toolbar: [true, "top"] to add an empty toolbar on the top of the grid. Then I use the following code

$('#t_' + $.jgrid.jqID($grid[0].id))
    .append($("<div><label for=\"globalSearchText\">Global search in grid for:&nbsp;" +
        "</label><input id=\"globalSearchText\" type=\"text\"></input>&nbsp;" +
        "<button id=\"globalSearch\" type=\"button\">Search</button></div>"));

使用HTML片段填充工具栏

to fill the toolbar with the HTML fragment

<div>
    <label for="globalSearchText">Global search in grid for:&nbsp;</label>
    <input id="globalSearchText" type="text">&nbsp;
    <button id="globalSearch" type="button">Search</button>
</div>

要开始搜索，我使用了以下JavaScript代码

To start searching I used the following JavaScript code

$("#globalSearchText").keypress(function (e) {
    var key = e.charCode || e.keyCode || 0;
    if (key === $.ui.keyCode.ENTER) { // 13
        $("#globalSearch").click();
    }
});
$("#globalSearch").button({
    icons: { primary: "ui-icon-search" },
    text: false
}).click(function () {
    var rules = [], i, cm, postData = $grid.jqGrid("getGridParam", "postData"),
        colModel = $grid.jqGrid("getGridParam", "colModel"),
        searchText = $("#globalSearchText").val(),
        l = colModel.length;
    for (i = 0; i < l; i++) {
        cm = colModel[i];
        if (cm.search !== false && (cm.stype === undefined || cm.stype === "text")) {
            rules.push({
                field: cm.name,
                op: "cn",
                data: searchText
            });
        }
    }
    postData.filters = JSON.stringify({
        groupOp: "OR",
        rules: rules
    });
    $grid.jqGrid("setGridParam", { search: true });
    $grid.trigger("reloadGrid", [{page: 1, current: true}]);
    return false;
});

其中$grid是我们开始搜索的网格(var $grid = $("#list");).

where $grid is the grid where we start searching (var $grid = $("#list");).

为了稍微改善顶部工具栏中元素的可见性，我使用了这种简单的附加CSS

To improve a little the visibility of the elements in the top toolbar I used such simple additional CSS

.ui-jqgrid .ui-userdata { height: auto; }
.ui-jqgrid .ui-userdata div { margin: .1em .5em .2em;}
.ui-jqgrid .ui-userdata div>* { vertical-align: middle; }

结果如下图所示

第二个演示使用higlighting插件来提高网格，以便用户立即看到在搜索到的字段中找到行的位置:

The second demo uses higlighting plugin to improve visibility of the grid so that the user sees immediately where in the row the searched field are found:

可以看到，在创建搜索过滤器的过程中，我跳过了具有search: false属性的列(如"note"列)和具有stype: "select"的列.我在所有列中都使用了"cn"(包含)过滤器.

One can sees that during creating of searching filter I skipped columns which have search: false property (like "note" column) and the columns having stype: "select". I used "cn" (contains) filter in all columns.

这篇关于jqgrid的通用搜索字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！