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

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

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

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

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

Ответ 1

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

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

Чтобы быть более точным, ваш код должен выглядеть как код из ответа как перезагрузить jqgrid в asp.net mvc, когда я меняю dropdownlist:

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:

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

Ответ 2

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

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

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

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

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

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

Ответ 3

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