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

Question

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

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

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

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

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

Answer 1

Чтобы отфильтровать локальную сетку, вам нужно только заполнить filters свойство параметра postData jqGrid и дополнительно установить search:true.

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

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

$("#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}]);
});

Я сделал демо для вас, котороеОтфильтровав два столбца: «Клиент» («Имя») и «Заметки» («Заметка»), вы можете расширить код для поиска во всех нужных вам столбцах.

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