jqgrid 的通用搜索字段 [英] Universal search field for jqgrid

问题描述

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

一个工具栏搜索自定义搜索单字段搜索一种更复杂的方法，涉及许多领域和条件 - 高级搜索

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

编辑:我想一次获取所有数据并使用该本地数据集的搜索.

见附图.

解决方案

有很多方法可以实现这样的需求.我准备了两个演示来演示可能的解决方案中的一个:使用高亮插件来提高网格以便用户立即看到搜索字段在行中的位置:

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

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.

See attached picture.

解决方案

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.

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>"));

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>

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;
});

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

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; }

The results looks like on the picture below

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:

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 的通用搜索字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！