jqGrid自动过滤高亮搜索结果 [英] jqGrid auto filter highlighting search result
问题描述
我需要帮助在匹配时突出显示 jqgrid 行的数据部分.
我的 jqGrid 标记:
<div title="环境变量"><div 类="jqUIDiv"><table id="tblEnvvars" width="100%"></table><div id="EnvvarsGridpager"></div></div></div>'还有我的 jqGrid 代码:
var envVars=[];//xml是从服务器发送的xml响应$(xml).children('product').each(function(){$(this).children('envvars').each(function(){$(this).children('变量').each(function(){变量行={};存在=真；row.name=$(this).attr('name');row.value=$(this).attr('value');envVars.push(行);});});});jQuery("#tblEnvvars").jqGrid({数据类型:本地"，数据:环境变量，colNames:['名称'，'值']，col型号:[{name:'name',index:'name', align:"left"},{名称:'值'，索引:'值'，对齐:左"}],寻呼机:'#EnvvarsGridpager',行号:10，行列表:[10,50,100]，滚动偏移:0，高度:'自动'，自动宽度:真，观看记录:真实，网格视图:真});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 应突出显示.
更新:2011 年 12 月 15 日
我发现 的演示.如果您要使用 beforeSearch(请参阅 Justin Ethier 评论中的建议)，您可以轻松修改演示以使用 filterToolbar.
更新:再次仔细阅读您的问题后，我喜欢您的想法，以突出搜索模式非常有趣.所以我创建了 你找到了，但是我换了行
spannode.className = 'highlight';到
spannode.className = 'ui-state-highlight';更兼容 jQuery UI CSS.
我不使用 filterToolbar 的任何回调函数 因为所有的回调都将被调用之前新的网格体将被填充.filterToolbar 填充 filters postData部分，将jqGrid的search参数设置为true并触发reloadGrid.因此，应该突出显示 loadComplete(或 gridComplete)回调中的数据，因为此时所有应该突出显示的数据都在网格中.所以我以简单的形式使用了 filterToolbarp>
$("#list1").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});loadComplete 的实现如下:
loadComplete: function () {var 过滤器, i, l, 规则, 规则, iCol, $this = $(this);如果(this.p.search === true){过滤器 = $.parseJSON(this.p.postData.filters);if (filters !== null && typeof filters.rules !== 'undefined' &&过滤器.规则.长度>0) {规则=过滤器.规则；l = 规则长度；对于 (i = 0; i < l; i++) {规则=规则[i]；iCol = getColumnIndexByName($this, rule.field);如果 (iCol >=0) {$('>tbody>tr.jqgrow>td:nth-child(' + (iCol + 1) +')', this).highlight(rule.data);}}}}}I want help in highlighting jqgrid row's data part as and when they are matched.
My jqGrid markup:
<div title="Environment variables">
<div class="jqUIDiv">
<table id="tblEnvvars" width="100%"></table>
<div id="EnvvarsGridpager"></div>
</div>
</div>'
And my jqGrid code:
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'});
for example:
if a row item contains LD_LIBRARY_PATH and user types in LIB in search area, then LIB in LD_LIBRARY_PATH should get highlighted.
Update: 15/12/2011
I found this Highlight plugin to highlight but need help in applying it.
I used it to create the below screenshot
Here is the code i used
jQuery("#list1").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn', afterSearch:highlightIt()});
function highlightIt()
{
$('#list1 > tbody > tr > td').highlight('HOST');
}
Look at the demo from the answer. If you would use beforeSearch (see suggestion from the Justin Ethier comment) you can easy modify the demo to use filterToolbar.
UPDATED: After rereading of your question carefully one more time I fond your idea to highlight the search patterns very interesting. So I created the demo which demonstrate how to implement your requirement. I used the options
loadonce: true,
ignoreCase: true
to make case insensitive local filtering of the data. If you use already local data types (any datatypes excepring 'xml' and 'json') the data will be already hold locally and you don't need to add additional loadonce: true option.
Typing in the searching filter above the grid search patterns the data will be not only filtered by the patterns but the pattern part of very cell in the column will be highlighted which improves the visibility. So you can see the results like on the following picture:
Now about the implementation. First of all I use the Highlight plugin which you found, but I changed the line
spannode.className = 'highlight';
to
spannode.className = 'ui-state-highlight';
to be more compatible to jQuery UI CSS.
I don't use any callback function of the filterToolbar because all the callbacks will be called before the new grid body will be filled. The filterToolbar fill filters part of the postData, set the search parameter of jqGrid to true and trigger reloadGrid. So one should highlight the data inside of loadComplete (or gridComplete) callback because at the moment all data which should be highlighted are in the grid. So I used filterToolbar in the simple form
$("#list1").jqGrid('filterToolbar',
{stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
The implementation of loadComplete you find below:
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);
}
}
}
}
}
这篇关于jqGrid自动过滤高亮搜索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
