Как фильтровать данные jqGrid, НЕ используя встроенное поле поиска / фильтра

Question

Я хочу, чтобы пользователи могли фильтровать данные сетки без использования встроенного поискового поля.

Я создал два поля ввода для даты (от и до), и теперь мне нужно сообщить сетке, чтобы она использовалась в качестве фильтра, а затем запрашивать новые данные.

Подделка серверного запроса для данных сетки (обход сетки) и установка данных сетки в качестве данных ответа не будут работать, потому что, как только пользователь пытается переупорядочить результаты или изменить страницу и т. Д., Сетка будет запрашивать новые данные с сервера, используя пустой фильтр.

Кажется, я не могу найти Grid API для этого - у кого-нибудь есть идеи? Спасибо.

Answer 1

Ваша проблема может быть очень легко решена с помощью параметра postData, включая функции и trigger('reloadGrid'). Я пытаюсь объяснить идею более подробно.

Давайте использовать mtype: "GET". Единственное, что стандартное поле поиска / фильтра делает после отображения интерфейса, это добавление некоторых дополнительных параметров в URL, отправка на сервер и перезагрузка данных сетки. Если у вас есть собственный интерфейс для поиска / фильтрации (например, некоторые элементы управления или флажки), вы должны просто добавить свой URL-адрес и перезагрузить сетку в соответствии с trigger('reloadGrid'). Для сброса информации в сетке вы можете выбрать любой способ, который вы предпочитаете. Например, вы можете включить в элементы управления select, у которых есть такая опция, как «без фильтрации».

Точнее, ваш код должен выглядеть как код из ответа Как перезагрузить jqgrid в asp.net mvc, когда я изменяю выпадающий список :

var myGrid = jQuery("#list").jqGrid({
    url: gridDataUrl,
    postData: {
        StateId: function() { return jQuery("#StateId option:selected").val(); },
        CityId: function() { return jQuery("#CityId option:selected").val(); },
        hospname: function() { return jQuery("#HospitalName").val(); }
    }
    // ...
});
//
var myReload = function() {
    myGrid.trigger('reloadGrid');
};
var keyupHandler = function (e,refreshFunction,obj) {
    var keyCode = e.keyCode || e.which;
    if (keyCode === 33 /*page up*/|| keyCode === 34 /*page down*/||
        keyCode === 35 /*end*/|| keyCode === 36 /*home*/||
        keyCode === 38 /*up arrow*/|| keyCode === 40 /*down arrow*/) {

        if (typeof refreshFunction === "function") {
            refreshFunction(obj);
       }
    }
};

// ...
$("#StateId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});
$("#CityId").change(myReload).keyup(function (e) {
    keyupHandler(e,myReload,this);
});

Если пользователь изменит выбранную опцию в поле выбора с помощью id=StateId или в другом окне выбора с помощью id=CityId (с помощью мыши или клавиатуры), будет вызвана функция myReload, которая просто заставит перезагрузить данные в jqGrid. Во время соответствующего $.ajax запроса, который jqGrid делает для нас, значение параметра postData будет переадресовано в $.ajax как параметр data. Если некоторые из свойств data являются функциями, эти функции будут вызываться $.ajax. Таким образом, фактические данные из полей выбора будут загружены, и все данные будут добавлены к данным, отправленным на сервер. Вам нужно только реализовать чтение этих параметров в вашей серверной части.

Таким образом, данные из параметра postData будут добавлены в URL (символы '?' И '&' будут добавлены автоматически, а все специальные символы, такие как пробелы, также будут закодированы как обычно). Преимущества использования postData это:

1. использование функций внутри postData параметр позволяет загружать фактические значения из всех используемых элементов управления до момента перезагрузки;
2. Ваш код пребывания имеет очень четкую структуру.
3. Все отлично работает не только с HTTP GET-запросами, но и с HTTP POST;

Если вы используете некоторые записи «без фильтрации» или «все» в поле выбора StateId, вы можете изменить функцию, которая вычисляет значение параметра StateId, который должен добавляться к URL-адресу сервера из

StateId: function() { return jQuery("#StateId option:selected").val(); }

примерно так:

StateId: function() {
    var val = jQuery("#StateId option:selected").val();
    return val === "all"? "": val;
}

На стороне сервера не следует выполнять фильтрацию для StateId, если вы получаете пустое значение в качестве параметра.

При желании вы можете использовать myGrid.setCaption('A text'); для изменения заголовка сетки. Это позволяет пользователю более четко видеть, что данные в сетке фильтруются по некоторым критериям.

Answer 2

У меня были те же требования, и (с помощью Олега) я придумал:

Обычно пользователь начинает вводить текстовое поле «Имя сотрудника», и сразу же результаты отображаются в jqGrid.

Подробности того, как я это реализовал, приведены здесь:

jqGrid - Изменить всплывающую форму фильтра / поиска - чтобы она была плоской на странице, а не диалогом

Обратите внимание, что я специально загружаю все данных JSON для моего jqGrid заранее , и что для больших наборов данных при запуске этого кода на iPhone / имеется задержка Android-устройство по мере ввода каждого символа.

Но для настольных веб-приложений это отличное решение, которое делает jqGrid более удобным для пользователя.

Answer 3

Используя функции ReloadGrid() и jquery, вы можете создавать свои собственные функции фильтрации.