我想要帮助突出显示jqgrid行的数据部分以及它们匹配的时间。
我的jqGrid标记:
<div title="Environment variables">
<div class="jqUIDiv">
<table id="tblEnvvars" width="100%"></table>
<div id="EnvvarsGridpager"></div>
</div>
</div>'
我的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
我发现this Highlight plugin要突出显示,但需要帮助才能应用它。
我用它来创建以下截图
这是我使用的代码
jQuery("#list1").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn', afterSearch:highlightIt()});
function highlightIt()
{
$('#list1 > tbody > tr > td').highlight('HOST');
}
答案 0 :(得分:8)
从the demo查看the answer。如果您使用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的任何回调函数,因为在新网格体将被填充之前,所有回调都将被称为。 filters
的{{3}}填充postData
部分,将jqGrid的search
参数设置为true
并触发reloadGrid
。因此,应该突出显示loadComplete
(或gridComplete
)回调中的数据,因为此时应该突出显示的所有数据都在网格中。所以我以简单的形式使用了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);
}
}
}
}
}