我想要帮助突出显示jqgrid行的数据部分以及它们何时匹配.
<div title="Environment variables"> <div class="jqUIDiv"> <table id="tblEnvvars" width="100%"></table> <div id="EnvvarsGridpager"></div> </div> </div>'
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
我发现this Highlight plugin要突出显示但需要帮助才能应用它.
我用它来创建下面的截图
这是我使用的代码
jQuery("#list1").jqgrid('filterToolbar',defaultSearch: 'cn',afterSearch:highlightIt()}); function highlightIt() { $('#list1 > tbody > tr > td').highlight('HOST'); }
解决方法
从
the answer开始查看
the demo.如果您使用beforeSearch(请参阅Justin Ethier评论的建议),您可以轻松修改演示以使用filterToolbar.
更新:再次仔细阅读您的问题后,我再次强调您的想法,以突出搜索模式非常有趣.所以我创建了the demo,它演示了如何实现您的需求.我用过这些选项
loadonce: true,ignoreCase: true
对数据进行不区分大小写的本地过滤.如果您已使用本地数据类型(除“xml”和“json”之外的任何数据类型),则数据将已在本地保留,您无需添加其他loadonce:true选项.
键入网格搜索模式上方的搜索过滤器,数据不仅会被模式过滤,而且列中非常单元格的模式部分将被突出显示,从而提高可见性.所以你可以看到如下图所示的结果:
现在关于实施.首先,我使用你找到的Highlight plugin,但我改变了这条线
spannode.className = 'highlight';
至
spannode.className = 'ui-state-highlight';
与jQuery UI CSS更兼容.
我没有使用filterToolbar的任何回调函数,因为在填充新的网格体之前将调用所有回调函数. filterToolbar填充过滤器部分postData,将jqgrid的搜索参数设置为true并触发reloadGrid.因此,应该突出显示loadComplete(或gridComplete)回调中的数据,因为此时应该突出显示的所有数据都在网格中.所以我以简单的形式使用了filterToolbar
$("#list1").jqgrid('filterToolbar',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); } } } } }