jqGrid Фильтрация записей

Question

Кажется, здесь было несколько вопросов относительно этой темы, и у них есть отличные ответы, но, похоже, мой случай немного отличается. Мне нужно отфильтровать записи, отображаемые в jqGrid, но полностью на стороне клиента.

По ряду причин лучший способ заполнить мою сетку - это массив, который испускается непосредственно в JavaScript на странице. Сама сетка вообще не взаимодействует с сервером. У меня есть какой-то пользовательский AJAX, происходящий в различных сетевых событиях, но это все. (В принципе, я интегрирую это с существующим набором доступных сервисов, которые не могут существенно измениться.)

Что я хочу сделать, это фильтровать сетку на основе простого ввода текста и кнопки. На моей странице есть текстовый ввод, кнопка и таблица (которая становится сеткой на готовом документе). Я хотел бы привязываться к событию клика кнопки (нормальное привязку события jQuery, ничего особенного) и использовать значение из текстового ввода в качестве фильтра отображения на jqGrid.

Под «фильтром» я имею в виду отображение только записей, содержащих совпадение (в любом поле) для текста на входе. Затем, чтобы отобразить все записи, просто опустите вход и снова нажмите кнопку. Кроме того, сетка является мультиселектором, и выбор должен сохраняться с помощью фильтрации. Мне просто нужно скрыть строки, которые не соответствуют тому, что находится во входе.

Возможно ли это?

Answer 1

Для фильтрации локальной сетки необходимо заполнить только filters параметр postData параметра jqGrid и дополнительно установить search:true.

Для сохранения выбора сетки вы можете использовать reloadGrid с дополнительным параметром [{page:1,current:true}] (см. here).

Соответствующий код может быть следующим

$("#search").click(function() { 
    var searchFiler = $("#filter").val(), grid = $("#list"), f; 

    if (searchFiler.length === 0) { 
     grid[0].p.search = false; 
     $.extend(grid[0].p.postData,{filters:""}); 
    } 
    f = {groupOp:"OR",rules:[]}; 
    f.rules.push({field:"name",op:"cn",data:searchFiler}); 
    f.rules.push({field:"note",op:"cn",data:searchFiler}); 
    grid[0].p.search = true; 
    $.extend(grid[0].p.postData,{filters:JSON.stringify(f)}); 
    grid.trigger("reloadGrid",[{page:1,current:true}]); 
}); 

Я сделал the demo для вас, какой фильтр для двух столбцов «Клиент» («имя») и «Записки» («Примечание») вы можете продлить код для поиска во всех столбцах, которые вам нужны.

В зависимости от того, что вы имеете в виду с выбором строки сохранения, вам может понадобиться сохранить текущий выбор из selarrrow в переменной и восстановить выбранные строки по методу setSelection.