Dos preguntas relacionadas sobre los filtros de encabezado de columna jqGrid y el cuadro de diálogo de filtrado avanzado

Al desarrollar mi primera aplicación ASP.NET MVC 3 utilizando jqGrid para mostrar algunos datos, estoy usando los filtros de encabezado de columna y también estoy permitiendo que se realice el filtrado avanzado de la barra de herramientas de filtro. Independientemente, estas cosas funcionan bastante bien.

Primera pregunta: ¿Alguien tiene una solución para comunicar la configuración actual del filtro de encabezado de columna a los filtros avanzados?

Como ejemplo, un usuario puede filtrar en la columna “Ice Cream Name”, ingresando un nombre parcial, por ejemplo, “Chocolate”, y se filtrará a “Chocolate Explosion”, “Dark Chocolate”, etc. – genial. Lo que sería bueno sería abrir el filtro avanzado y hacer que el filtro de columna “contiene ‘Chocolate'” se rellene automáticamente en el filtro avanzado. Reconozco que la otra dirección (donde alguien podría AND u O dos valores para la misma columna, por ejemplo, “Chocolate” O “Caramelo”) se vuelve problemática, pero en la otra dirección, parece que podría ser posible. Tal vez esto es solo un ajuste de la grilla que me falta. ¿Alguien resolvió esto?

Segunda pregunta: actualmente puedo hacer algunos filtros con los filtros de encabezado de columna, mostrar algunos resultados en la grilla y luego ir al cuadro de diálogo de filtro avanzado y configurar un filtro diferente. Esto mostrará los resultados correctos, pero los filtros de encabezado de columna no se borran, dando la impresión de que el filtrado no funciona. ¿Cómo puedo restablecer esos filtros de encabezado de columna después de que el uso haga clic en el botón “Buscar” en el cuadro de diálogo?

Encuentro su pregunta muy interesante, así que preparé la demostración que demuestra cómo se puede combinar el diálogo Búsqueda avanzada y la Búsqueda de la barra de herramientas en una cuadrícula.

Un truco importante pero simple es el uso de recreateFilter: true . Por defecto, el diálogo de búsqueda se creará una vez y luego solo se ocultará o se mostrará. Como resultado, el parámetro postData.filters no se actualizará. Después de establecer recreateFilter: true resolverá el problema con el llenado del diálogo de búsqueda avanzada con los valores de la barra de herramientas de búsqueda. Personalmente configuré las opciones de búsqueda predeterminadas como las siguientes

 $.extend( $.jgrid.search, { multipleSearch: true, multipleGroup: true, recreateFilter: true, overlay: 0 } ); 

Ahora, para una parte más compleja de la solución, está la función refreshSerchingToolbar que escribí. La función no es tan simple, pero simplemente está en uso:

 loadComplete: function () { refreshSerchingToolbar($(this), 'cn'); } 

El último parámetro es el mismo parámetro que utilizó como propiedad defaultSearch del método filterToolbar de la barra de herramientas de búsqueda (el valor predeterminado es ‘bw’, pero personalmente prefiero usar ‘cn’ y establecer el parámetro ignoreCase: true ).

Si completa el cuadro de diálogo de búsqueda avanzada de la demostración con el siguiente campo

enter image description here

y haga clic en el botón “Buscar”, tendrá la siguiente grilla:

enter image description here

(Marqué la columna ‘Total’ como no buscable con respecto a la search: false para mostrar solo que todo funciona correctamente en el caso también)

Se puede ver que todos los campos de la barra de herramientas de búsqueda, excepto “Cantidad”, se rellenan con los valores del cuadro de diálogo de búsqueda. El campo no se llena porque utilizamos la operación “rallador o igual” en lugar de “igual”. La función refreshSerchingToolbar rellena solo los elementos de la barra de herramientas de búsqueda que puede producir el

Solo como recordatorio debo mencionar que en el caso del uso de la barra de herramientas de filtro es muy importante definir las opciones de búsqueda de opciones de colModel . Para todas las columnas que no contengan cadenas (fechas, números, selecciones, int, moneda) es extremadamente importante tener ‘eq’ como primer elemento de la matriz sopt . Mira aquí y aquí para más detalles.

Si cambia el filtro del cuadro de diálogo avanzado por el siguiente

enter image description here

Tendrás lo esperado

enter image description here

Al final, refreshSerchingToolbar el código de la función refreshSerchingToolbar :

 var getColumnIndex = function (grid, columnIndex) { var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length; for (; i < l; i += 1) { if ((cm[i].index || cm[i].name) === columnIndex) { return i; // return the colModel index } } return -1; }, refreshSerchingToolbar = function ($grid, myDefaultSearch) { var postData = $grid.jqGrid('getGridParam', 'postData'), filters, i, l, rules, rule, iCol, cm = $grid.jqGrid('getGridParam', 'colModel'), cmi, control, tagName; for (i = 0, l = cm.length; i < l; i += 1) { control = $("#gs_" + $.jgrid.jqID(cm[i].name)); if (control.length > 0) { tagName = control[0].tagName.toUpperCase(); if (tagName === "SELECT") { // && cmi.stype === "select" control.find("option[value='']") .attr('selected', 'selected'); } else if (tagName === "INPUT") { control.val(''); } } } if (typeof (postData.filters) === "string" && typeof ($grid[0].ftoolbar) === "boolean" && $grid[0].ftoolbar) { filters = $.parseJSON(postData.filters); if (filters && filters.groupOp === "AND" && typeof (filters.groups) === "undefined") { // only in case of advance searching without grouping we import filters in the // searching toolbar rules = filters.rules; for (i = 0, l = rules.length; i < l; i += 1) { rule = rules[i]; iCol = getColumnIndex($grid, rule.field); cmi = cm[iCol]; control = $("#gs_" + $.jgrid.jqID(cmi.name)); if (iCol >= 0 && control.length > 0) { tagName = control[0].tagName.toUpperCase(); if (((typeof (cmi.searchoptions) === "undefined" || typeof (cmi.searchoptions.sopt) === "undefined") && rule.op === myDefaultSearch) || (typeof (cmi.searchoptions) === "object" && $.isArray(cmi.searchoptions.sopt) && cmi.searchoptions.sopt[0] === rule.op)) { if (tagName === "SELECT") { // && cmi.stype === "select" control.find("option[value='" + $.jgrid.jqID(rule.data) + "']") .attr('selected', 'selected'); } else if (tagName === "INPUT") { control.val(rule.data); } } } } } } }; 

ACTUALIZADO : El código anterior ya no es necesario en caso de uso libre de jqGrid 4.13.1 o superior. Contiene la nueva opción predeterminada loadFilterDefaults: true de filterToolbar , que actualiza los valores de la barra de herramientas de filtro y las operaciones de filtro (si la opción searchOperators: true de filterToolbar es ised) si se establecen postData.filters y search: true (el filtro es aplicado). Free jqGrid actualiza la barra de herramientas de filtro en jqGridAfterLoadComplete (si loadFilterDefaults: true está establecido) o si el evento jqGridRefreshFilterValues se activa explícitamente.

Sé que es una publicación anterior, pero si tiene varias cuadrículas en la misma página, el código anterior puede agregar el texto del filtro a la cuadrícula incorrecta.

Cambiando esto en el primer ciclo en refreshSearchingToolbar, desde

 control = $("#gs_" + $.jgrid.jqID(cm[i].name)); 

a

 control = $("#gview_"+$grid.attr('id')+" #gs_" + $.jgrid.jqID(cm[i].name)); 

y esto en el segundo ciclo de

 control = $("#gs_" + $.jgrid.jqID(cmi.name)); 

a

 control = $("#gview_"+$grid.attr('id')+" #gs_" + $.jgrid.jqID(cmi.name)); 

debería hacer el truco.

Felicitaciones a Oleg