Автоматический фильтр 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 в области поиска, тогда LIB в LD_LIBRARY_PATH должно подсвечиваться.

Обновление: 15.12.2011

Я нашел этот плагин Highlight , чтобы выделить, но нужна помощь в его применении.

Я использовал его для создания скриншота ниже

Вот код, который я использовал

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

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

Answer 1

Посмотрите на демо от ответа .Если вы используете beforeSearch (см. Предложение из комментария Джастина Этьера), вы можете легко изменить демо, чтобы использовать filterToolbar.

ОБНОВЛЕНО : после перечитывания вашего вопроса еще раз внимательноВ свое время я увлекался вашей идеей выделить шаблоны поиска очень интересно.Поэтому я создал демонстрационную версию , которая демонстрирует, как реализовать ваше требование.Я использовал опции

loadonce: true,
ignoreCase: true

, чтобы сделать локальную фильтрацию данных без учета регистра.Если вы используете уже локальные типы данных (любые типы данных, за исключением 'xml' и 'json'), данные уже будут храниться локально, и вам не нужно добавлять дополнительную опцию loadonce: true.

Ввод в поискеФильтровать над шаблонами поиска в сетке, данные будут не только фильтроваться по шаблонам, но и будет выделена часть шаблона самой ячейки в столбце, что улучшит видимость.Таким образом, вы можете увидеть результаты, как на следующем рисунке:

Теперь о реализации.Прежде всего я использую плагин Highlight , который вы нашли, но я изменил строку

spannode.className = 'highlight';

на

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

, чтобы быть более совместимым с jQuery UI CSS.

Я не использую никакую функцию обратного вызова filterToolbar , потому что все обратные вызовы будут вызываться до того, как будет заполнено новое тело сетки. filterToolbar заполнить filters часть postData, установить для параметра search в jqGrid значение 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);
                }
            }
        }
    }
}