jqgrid的通用搜索字段

我是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($("
Global search in grid for: " + " " + "Search
")); 

使用HTML片段填充工具栏

 
 Global search in grid for:    Search  

要开始搜索，我使用了以下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插件来提高网格的可见性，以便用户立即看到搜索字段在行中的位置：

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

Answer 2

是的，这是可能的 – 我可以补充一点。 只需将文本框放在网格上方（或任何您想要的位置）：

还有一个搜索按钮：

Search

以下是该按钮的click事件所需的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子句构建查询…