Bien, entonces en pocas palabras, lo que tengo que hacer es aplicar automáticamente un conjunto de criterios de clasificación y filtros de datos al jqGrid cuando se carga. La intención es que el usuario comience con aproximadamente 10 filtros pre-rellenos y luego, si así lo eligen, pueden alterar esos filtros o clasificarlos como mejor les parezca.Necesito ayuda para automatizar los filtros jqGrid, por favor
Hasta ahora, con mucha Google-ción, ensayo y error y el sudor, tengo el siguiente trabajo:
-> puedo cargar/guardar la columna & ordenar sort en una cookie de sesión.
-> Puedo cargar el cuadro de búsqueda con filtros de búsqueda predefinidos. Después de cargar la grilla, puedo abrir el cuadro de diálogo modal y ver los filtros adecuados, y si hago clic en "Buscar", los datos apropiados se publican en el servidor y los resultados correctos vuelven a la pantalla.
Lo que me está mordiendo en el trasero en este momento es, creo, la parte fácil, pero se me escapa. Parece que no puedo hacer ninguno de los siguientes:
(A) Lo ideal sería si pudiera conectar estos filtros a la red y sus datos de publicación antes de la carga inicial para que solo haya un único viaje al servidor
(B) La solución viable, aunque menos ideal, sería que la grilla cargue primero la primera página de los datos no filtrados, luego aplique los filtros y vuelva a consultar el servidor para los datos filtrados.
Como hoy puedo hacer clic manualmente en el botón "Buscar" y funciona, pensé que "B" sería un buen paso siguiente. Por lo tanto, en mi función gridComplete, tengo el siguiente código:
$('#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
{}
);
Y, por la petición, aquí está el código que tengo para añadir/Eliminar filtro:
/*
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 });
Gracias, Oleg. He agregado la definición de la grilla. Originalmente lo había omitido porque la funcionalidad real de definir y asignar los filtros de búsqueda funcionaba bien y si hacía clic en el botón "buscar" manualmente, funcionaba como se esperaba, así que de esa información supuse que mi cuadrícula estaba configurada correctamente. Pero tienes razón, debería haberlo incluido independientemente. – Tony
Algunos de los enlaces que proporcionó, que había visto, y algunos que no. Sin embargo, cuando los miro, se enfocan en cómo hacer que la búsqueda funcione. Esa parte, la parte difícil, ya lo hice. Es solo la recarga de la grilla y/o la precarga de los criterios de búsqueda que no he podido identificar. Su sugerencia de establecer el tipo de datos, luego los filtros y restablecer el tipo de datos es interesante. Voy a intentarlo esta mañana. – Tony
Intenté su sugerencia de establecer primero el tipo de datos en "local" y luego aplicar los filtros y restablecer el tipo de datos a "json" y luego llamar a la grilla de recarga. El primer problema es que los filtros no se aplican a la red cuando la red está en ese modo. Aún no lo he comprobado, pero o bien no puede aplicar los filtros cuando el tipo de datos es "local" o al cambiar el tipo de datos borra los filtros. A pesar de todo, el segundo problema es que cuando utilizo Fiddler para ver las solicitudes del navegador, la grilla nunca vuelve a llamar al servidor para obtener datos, incluso después de configurar el tipo de datos en json y volver a cargar la grilla. – Tony