jqGrid自动过滤器突出显示搜索结果 [英] jqGrid auto filter highlighting search result

问题描述

在匹配时以及在突出显示jqgrid row的数据部分时，我需要帮助.

I want help in highlighting jqgrid row's data part as and when they are matched.

我的jqGrid标记:

My jqGrid markup:

<div title="Environment variables">
    <div class="jqUIDiv">
        <table id="tblEnvvars" width="100%"></table>
        <div id="EnvvarsGridpager"></div>
    </div>
</div>'

还有我的jqGrid代码:

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'});

例如:

如果某行项目包含LD_LIBRARY_PATH，并且用户区域在搜索区域的LIB中，则LD_LIBRARY_PATH中的LIB应该突出显示.

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.

更新:2011年15月12日

我找到了此Highlight插件突出显示，但在应用时需要帮助.

I found this Highlight plugin to highlight but need help in applying it.

我用它来创建以下屏幕截图

I used it to create the below screenshot

这是我使用的代码

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

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

推荐答案

查看 答案中的演示.如果您要使用beforeSearch(请参阅Justin Ethier注释中的建议)，则可以轻松地修改演示以使用filterToolbar.

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

使数据不区分大小写的局部过滤.如果您已经使用本地数据类型(任何除'xml'和'json'之外的数据类型)，则数据将已经在本地保存，并且您无需添加其他loadonce: 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';

到

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

更兼容jQuery UI CSS.

to be more compatible to jQuery UI CSS.

我不使用 filterToolbar的任何回调函数，因为所有回调将在之前被调用，新的网格主体将被填充. filterToolbar 填充filters部分postData，将jqGrid的search参数设置为true并触发reloadGrid.因此，应突出显示loadComplete(或gridComplete)回调内部的数据，因为此刻所有应突出显示的数据都在网格中.因此，我以简单的形式使用了 filterToolbar

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'});

loadComplete的实现，您可以在下面找到:

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屋！