¿Por qué la columna congelada de Jqgrid no parece funcionar con filas de filtro y encabezado de filtro?

No puedo obtener columnas congeladas para trabajar con jqgrid (4.3.0). lo único que se me ocurre es que tengo algunas cosas específicas que no están listas:

  1. Estoy usando una fila filtrada en la parte superior.
  2. Estoy mostrando todos los botones en la parte superior de la cuadrícula usando (cloneToTop: true)
  3. Tengo el siguiente código que uso para mostrar el estado del filtro en la parte superior de jqggrid. (usando filtertoolbar)

    loadComplete: function () { var postData = jQuery(gridSelector).getGridParam("postData"); var newCapture = ""; if (postData._search === true && typeof postData.filters !== "undefined") { var filters = jQuery.parseJSON(postData.filters); newCapture = "Filter: ["; var rules = filters.rules; for (var i = 0; i < rules.length; i++) { var rule = rules[i]; var op = rule.op; // the code name of the operation if (jQuery.fn.searchFilter && jQuery.fn.searchFilter.defaults && jQuery.fn.searchFilter.defaults.operators) { // find op description var operators = jQuery.fn.searchFilter.defaults.operators; for (var j = 0; j < operators.length; j++) { if (operators[j].op === rule.op) { op = operators[j].text; //op = $.jgrid.search.odata[j]; break; } } } newCapture += rule.field + " " + op + " '" + rule.data + "'"; if (i + 1 !== rules.length) newCapture += ", "; } newCapture += "]"; } jQuery(gridSelector).setCaption(newCapture); 

¿Alguien puede pensar en algo que evite que las columnas congeladas funcionen en estas circunstancias?

Analicé tu problema y creé la demostración que demuestra cómo se puede resolver el problema. La demostración produce la grilla con la primera columna congelada:

enter image description here

Encontré algunos errores en la implementación actual (versión 4.3.1) de las columnas congeladas en jqGrid y publicaré más tarde mis sugerencias sobre cómo solucionarlo allí. Los problemas son los siguientes:

Uno puede ver el primer problema especialmente claro en el caso del datatype: 'local' de datatype: 'local' donde los datos de la grilla se llenarán durante la inicialización de la grilla. Vea la demostración correspondiente en la que acabo de llamar al método setFrozenColumns . Uno puede ver el problema en la imagen

enter image description here

Puede ver que solo se congelará el encabezado de la columna, pero se desplazará el cuerpo de la cuadrícula, incluida la columna con números de fila. Como se puede ver en la próxima demostración , bastará con llamar al método _complete directamente después de llamar a setFrozenColumns para solucionar el problema:

 $grid.jqGrid('setFrozenColumns'); $grid[0].p._complete.call($grid[0]); 

donde $grid se define como var $grid = $('#list'); .

El siguiente problema es que _complete method calcule la posición de la parte fija del encabezado de columna (guardada en $grid[0].grid.fhDiv ) y la parte fija del cuerpo de la grilla (guardada en $grid[0].grid.fbDiv ) solo usando la altura del título de la grilla estándar (título de la grilla). Entonces, si usa setCaption para cambiar el título, puede tener inmersiones “congeladas” en la posición incorrecta. La llamada del método _complete después de setCaption no solucionará el problema y uno todavía tendrá los resultados como en la demostración :

enter image description here

Para solucionar el problema, escribí la función muy simple fixPositionsOfFrozenDivs

 var fixPositionsOfFrozenDivs = function () { if (typeof this.grid.fbDiv !== "undefined") { $(this.grid.fbDiv).css($(this.grid.bDiv).position()); } if (typeof this.grid.fhDiv !== "undefined") { $(this.grid.fhDiv).css($(this.grid.hDiv).position()); } }; 

que arregla la posición de las inmersiones congeladas.

Al final modifiqué un poco la implementación de loadComplete a lo siguiente:

 loadComplete: function () { var $this = $(this), newCapture = "", filters, rules, rule, op, i, iOp, postData = $this.jqGrid("getGridParam", "postData"), isFiltering = $this.jqGrid("getGridParam", "search"); if (isFiltering === true && typeof postData.filters !== "undefined") { filters = $.parseJSON(postData.filters); newCapture = "Filter: ["; rules = filters.rules; for (i = 0; i < rules.length; i++) { rule = rules[i]; op = rule.op; // the code name of the operation iOp = $.inArray(op, arOps); if (iOp >= 0 && typeof $.jgrid.search.odata[iOp] !== "undefined") { op = $.jgrid.search.odata[iOp]; } newCapture += rule.field + " " + op + " '" + rule.data + "'"; if (i + 1 !== rules.length) { newCapture += ", "; } } newCapture += "]"; } $this.jqGrid("setCaption", newCapture); fixPositionsOfFrozenDivs.call(this); } 

donde la matriz arOps se define como

 var arOps = ["eq", "ne", "lt", "le", "gt", "ge", "bw", "bn", "in", "ni", "ew", "en", "cn", "nc"]; 

Como resultado, uno tendrá la demostración a la que hice referencia al principio de mi respuesta. Si escribe algún filtro en la barra de herramientas del filtro de búsqueda o en el cuadro de diálogo de búsqueda avanzada, se cambiará el título de la cuadrícula (como en el ejemplo original), pero todas las inmersiones congeladas tendrán la posición correcta.