jqgrid的通用搜索字段

Question

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

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

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

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

见附图.

Answer 1

有许多方法可以实现这样的要求.我准备了两个演示,演示了可能的解决方案之一:第一个和下一个.第二个演示在第一个增强版本中,我使用higlighting jQuery插件,就像我在这里描述的那样.

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

$('#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片段填充工具栏

<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代码

$("#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");).

为了提高顶部工具栏中元素的可见性,我使用了这样简单的附加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插件来提高网格的可见性,以便用户立即看到搜索字段在行中的位置:

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