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

是的，这是可能的——我可能会补充说非常简单。只需在网格上方（或您想要的任何位置）放置一个文本框：

<input type="text" id="search-string" name="search-string" />

还有一个搜索按钮：

<a href="#" id="search-button">Search</a>

这是该按钮的单击事件所需的 jQuery：

$("#search-button").button().click(function(){
    searchString = $.trim($("#search-string").val());

    // check to see a search term has been entered in the textbox
    if(searchString == ""){
        alert("Please enter a word or phrase before searching!");
        // reset search box value to empty
        $("#search-string").val("").focus();
    }
    else{
        // set your grid's URL parameter to your server-side select file (that queries the DB)
        // we pass one parameter - the search string from the textbox
        $("#your-grid").jqGrid('setGridParam',{url:'crud/full-text-search.php?searchString='+searchString});
        // This line may need to be changed (if you use XML instead of JSON) 
        // It will reload the grid, using the new URL with the search term parameter
        $("#your-grid").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');  
    }
});

当然，在查询数据库的服务器端文件中，您需要获取包含搜索字符串的 URL 参数，并使用正确的 WHERE 子句构建查询...

Answer 2

有很多方法可以实现这样的要求。我准备了两个演示，演示了一个可能的解决方案：the first one 和the next one。第二个演示是第一个演示的增强版，我使用higlighting jQuery plugin，就像我描述它here一样。

首先，我将带有按钮的输入框添加到网格的顶部工具栏。我使用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; }

结果如下图所示

The second demo 使用高亮插件来提高网格的可见性，以便用户立即看到在行中找到搜索字段的位置：

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