it-roy-ru.com

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

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

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

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

Кажется, я не могу найти grid API для этого - у кого-нибудь есть идеи? Благодарю.

57
Jimbo

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

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

Чтобы быть более точным, ваш код должен выглядеть как код из ответа как перезагрузить 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'); для изменения заголовка сетки. Это позволяет пользователю более четко видеть, что данные в сетке фильтруются по некоторым критериям.

78
Oleg

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

enter image description here

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

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

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

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

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

2
Mike Gledhill

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

0
신유진