jqGrid自动filter突出显示搜索结果

我想要帮助突出显示jqgrid行的数据部分以及它们何时匹配。

我的jqGrid标记：

 
  
 
 
' 

和我的jqGrid代码：

 var envVars=[]; //xml is a xml response sent from server $(xml).children('product').each(function(){ $(this).children('envvars').each(function(){ $(this).children('variable').each(function(){ var row={}; isPresent=true; row.name=$(this).attr('name'); row.value=$(this).attr('value'); envVars.push(row); }); }); }); jQuery("#tblEnvvars").jqGrid({ datatype: "local", data: envVars, colNames:['Name','Value'], colModel:[ {name:'name',index:'name', align:"left"}, {name:'value',index:'value', align:"left"} ], pager : '#EnvvarsGridpager', rowNum:10, rowList:[10,50,100], scrollOffset:0, height: 'auto', autowidth:true, viewrecords: true, gridview: true }); jQuery("#tblEnvvars").setGridParam({rowNum:10}).trigger("reloadGrid"); jQuery("#tblEnvvars").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn'}); 

例如：

如果行项目包含LD_LIBRARY_PATH和搜索区域中LIB中的用户类型，则LD_LIBRARY_PATH中的LIB应突出显示。

更新：15/12/2011

我发现这个Highlight插件要突出显示，但在应用它时需要帮助。

我用它来创建下面的截图

这是我使用的代码

 jQuery("#list1").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn', afterSearch:highlightIt()}); function highlightIt() { $('#list1 > tbody > tr > td').highlight('HOST'); } 

Answer 1

从答案看看演示 。 如果您使用beforeSearch （请参阅Justin Ethier评论的建议），您可以轻松修改演示以使用filterToolbar 。

更新 ：再次仔细阅读您的问题后，我再次强调您的想法，以突出搜索模式非常有趣。 所以我创建了演示 ，演示了如何实现您的需求。 我用过这些选项

 loadonce: true, ignoreCase: true 

对数据进行不区分大小写的本地过滤。 如果您已使用本地数据类型（除'xml'和'json'之外'xml'任何数据类型），则数据将已在本地保存，您无需添加其他loadonce: true选项。

在网格搜索模式上方的搜索filter中键入数据不仅会被模式过滤，而且会突出显示列中非常单元格的模式部分，从而提高可见性。 所以你可以看到如下图所示的结果：

现在关于实施。 首先，我使用你找到的Highlight插件 ，但我更改了这一行

 spannode.className = 'highlight'; 

至

 spannode.className = 'ui-state-highlight'; 

与jQuery UI CSS更兼容。

我没有使用filterToolbar的任何回调函数，因为在填充新的网格体之前将调用所有回调函数。 filterToolbar填充filters postData的一部分，将postData的search参数设置为true并触发reloadGrid 。 因此，应该突出显示loadComplete （或gridComplete ）回调中的数据，因为此时应该突出显示的所有数据都在网格中。 所以我以简单的forms使用了filterToolbar

 $("#list1").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch: 'cn'}); 

你在下面找到loadComplete的实现：

 loadComplete: function () { var filters, i, l, rules, rule, iCol, $this = $(this); if (this.p.search === true) { filters = $.parseJSON(this.p.postData.filters); if (filters !== null && typeof filters.rules !== 'undefined' && filters.rules.length > 0) { rules = filters.rules; l = rules.length; for (i = 0; i < l; i++) { rule = rules[i]; iCol = getColumnIndexByName($this, rule.field); if (iCol >=0) { $('>tbody>tr.jqgrow>td:nth-child(' + (iCol + 1) + ')', this).highlight(rule.data); } } } } }