Question

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

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

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

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

见附图。

enter image description here

Answer 1

有很多方法可以实现这样的要求。我准备了两个演示，演示了可能的解决方案之一：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; }

结果如下图所示

enter image description here

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

enter image description here

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

Answer 2

是的，这是可能的 - 而且我可以添加很简单。只需将文本框放在网格上方（或任何您想要的位置）：

<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子句构建查询...

jqgrid的通用搜索字段

2 个答案: