jqGrid自动过滤突出显示搜索结果

Question

我需要帮助在匹配时突出显示 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。

更新：2011 年 12 月 15 日

我找到this Highlight plugin 突出显示但需要帮助来应用它。

我用它来制作下面的截图

这是我使用的代码

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

function highlightIt()
{
$('#list1 > tbody > tr > td').highlight('HOST');
}

Answer 1

从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填充filters部分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);
                }
            }
        }
    }
}