Мне нужна помощь по автоматизации фильтров jqGrid, пожалуйста
Итак, в двух словах, мне нужно автоматически применить набор критериев сортировки и фильтров данных к jqGrid при его загрузке. Намерение состоит в том, чтобы пользователь начал с примерно 10 предварительно заполненных фильтров, а затем, если они того пожелают, они могут изменить эти фильтры или сортировку так, как они считают нужным.
Пока, с большим количеством Google, проб и ошибок и пота, у меня есть следующая работа:
-> Я могу загрузить / сохранить столбец сортировки и порядок сортировки в файле cookie сеанса.
-> Я могу загрузить диалог поиска с предопределенными фильтрами поиска. После того, как сетка загрузится, я могу открыть модальное диалоговое окно и увидеть правильные фильтры, и если я нажму "Найти", соответствующие данные будут отправлены на сервер, и правильные результаты будут возвращены на экран.
То, что сейчас кусает меня в задницу, это, по-моему, легкая часть, но она ускользает от меня. Я не могу выполнить одно из следующих действий:
(A) Идеально было бы, если бы я мог прикрепить эти фильтры к сетке, и она будет публиковать данные до первоначальной загрузки, чтобы было только одно посещение сервера.
(B) Реализуемое решение, хотя и менее идеальное, было бы для сетки, чтобы сначала загрузить первую страницу нефильтрованных данных, а затем применить фильтры и повторно запросить у сервера отфильтрованные данные.
Поскольку я могу вручную нажать кнопку "найти" сегодня, и она работает, я подумал, что "B" будет хорошим следующим шагом. Итак, в моей функции gridComplete у меня есть следующий код:
$('#AccountGrid').clearFilter({gridName:'AccountGrid', pagerName:'AccountPager'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:1, op:'ne'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:3, op:'ne'});
// $('#fbox_AccountGrid').searchFilter().search();
// $('#fbox_AccountGrid .ui-search').click();
$('#AccountGrid').trigger('reloadGrid');
NOTE: "clearFilter" and "addFilter" are extension functions I have added to jqGrid to simplify adding and removing filters on the grid. They work exactly as desired at this point.
As you can see with those last three lines of code, I have tried using the built-in function, as well as going after the find button directly and even just forcing the entire grid to refresh. Either way, there is no attempt by the grid to go get new data (I am using Fiddler to watch for it).
What am I doing wrong in trying to force the grid to reload with the new filters?
And, if you know how, can you give me some direction on how to get the initial load of the grid to respect these filters?
TIA
Tony
Here is the full grid configuration (minus the extra columns and some colModel "cruft"):
jQuery('#AccountGrid').jqGrid({
url: '<my URL>',
width: 950,
height: 330,
shrinkToFit: 'true',
datatype: 'json',
mtype: 'POST',
multiselect: true,
multiboxonly: true,
multiselectWidth: 20,
colNames: [
'Account ID'
],
colModel: [
{ name: 'AccountID', index: 'AccountID', sortable: false, hidden:false, search:true }
],
gridComplete: function () {
// add the search criteria to the grid
if (initialLoad == true){
$('#AccountGrid').clearFilter({gridName:'AccountGrid', pagerName:'AccountPager'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:1, op:'ne'});
$('#AccountGrid').addFilter({gridName:'AccountGrid', field:'AccountID', data:3, op:'ne'});
// $('#fbox_AccountGrid').searchFilter().search();
// $('#fbox_AccountGrid .ui-search').click();
$('#AccountGrid').trigger('reloadGrid');
initialLoad = false;
}
},
jsonReader: {
repeatitems: false,
id: 'AccountID'
},
pager: jQuery('#AccountPager'),
rowNum: 50,
rowList: [10, 15, 25, 50, 75, 100],
onSortCol : function (sortname, indexColumn, sortorder){
$.cookie('AccountGrid_sortname', sortname);
$.cookie('AccountGrid_sortorder' , sortorder);
},
sortname : $.cookie('AccountGrid_sortname') ? $.cookie('AccountGrid_sortname') : 'AccountID',
sortorder: $.cookie('AccountGrid_sortorder') ? $.cookie('AccountGrid_sortorder') : 'asc',
viewrecords: true,
imgpath: ''
});
$('#AccountGrid').jqGrid('navGrid','#AccountPager',
{ view: false, add: false, edit: true, del: false,
alertcap:'No Account Selected',
alerttext: 'Please select an Account from the grid before performing this operation.',
editfunc: showAccountEditDialog },
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
{}
);
И, по запросу, вот код, который у меня есть для добавления / очистки фильтра:
/*
This is a grid extension function that will insert a new filter criteria
on the specified grid with the provided field, operation & data values
*/
(function ($) {
jQuery.jgrid.addSearchFilter =
{
// get/set the parameters
addFilter: function (options) {
var grid = $(this);
// get offset values or assign defaults
var settings = $.extend({
gridName: '',
field: '',
data: '',
op: ''
}, options || {});
// get the column model object from the grid that matches the provided name
var colModel = grid.getGridParam('colModel');
var column;
for (var i = 0; i < colModel.length; i++) {
if (colModel[i].name == options.field){
column = colModel[i];
break;
}
}
colModel = null;
if (column){
// if the last filter has a value, we need to create a new one and not overwrite the existing ones
if ($('#fbox_' + options.gridName + ' .sf .data input').last().val()){
$('#fbox_' + options.gridName).searchFilter().add();
}
// assign the selections to the search dialog
$('#fbox_' + options.gridName + ' .sf .fields select.field').last().val(column.index).change();
$('#fbox_' + options.gridName + ' .sf .data input').last().val(options.data);
$('#fbox_' + options.gridName + ' .sf .ops select.default').last().val(options.op).change();
}
}
}
})(jQuery);
jQuery.fn.extend({ addFilter: jQuery.jgrid.addSearchFilter.addFilter });
/*
This is a grid extension function that will clear & reset the filter criteria
*/
(function ($) {
jQuery.jgrid.clearSearchFilter =
{
// get/set the parameters
clearFilter: function (options) {
var grid = $(this);
// get offset values or assign defaults
var settings = $.extend({
gridName: '',
pagerName: ''
}, options || {});
// clear the filters and "pop" the dialog to force the HTML rendering
$('#fbox_' + options.gridName).searchFilter().reset();
$('#' + options.pagerName + ' .ui-icon-search').click();
$('#fbox_' + options.gridName).searchFilter().close();
}
}
})(jQuery);
jQuery.fn.extend({ clearFilter: jQuery.jgrid.clearSearchFilter.clearFilter });
1 ответ
Прежде всего потому, что вы не публикуете код, который определяет jqGrid, я сам делаю некоторые предположения. Я стараюсь опираться на косвенную информацию из вашего вопроса.
1) Я полагаю, что вы используете серверную часть datatype параметр jqGrid, такой как "json" или "xml".
2) Вы не используете loadonce:true параметр. В общем, если бы можно было сделать перезагрузку сервера из сетки, имеющей loadonce:true, но в случае вы должны сбросить значение datatype параметр к начальному значению (один из значений 'json' или 'xml').
Следующие три старых ответа: это (в случае поиска по одному значению) и это (в случае расширенного поиска или поиска на панели инструментов с дополнительным параметром) stringResult:true) даст вам достаточно информации о настройке поисковых фильтров и перезагрузке сетки, соответствующей новым фильтрам. Другой ответ показывает, как очистить поисковый фильтр, если он больше не нужен.
Загрузка сетки в первый раз с фильтрами - это другой вопрос. Это может быть очень легко реализовано. Вы должны просто использовать datatype:"local" вместо datatype:"json" или же datatype:"xml" который вам действительно нужен. В случае, если url Параметр jqGrid будет просто проигнорирован при первой загрузке, а jqGrid не отправит запрос на сервер. Затем вы устанавливаете фильтры как вам нужно и только потом используете $("#youGridId").trigger("reloadGrid");
Причина, почему reloadGrid не работал в вашем случае, я не мог знать точно, но я полагаю, что вы не установили search:true параметр jqGrid, который часто путают с _search собственность postData параметр (см. здесь).