Cómo crear dos filas de pie de página en jqgrid

Estoy trabajando en jqgrid con ASP.NET WEB API.

Quiero agregar dos filas en el pie de página de jqgrid.

Así que una pequeña búsqueda en la red me trajo a este enlace (2010) que dice “No es posible”, estoy pensando que la respuesta es de 2010, puede haber algo / alguna solución podría haber sido posible para este .

¿Qué quiero mostrar en el pie de página?

Quiero mostrar dos filas

  • Total de datos preestablecidos en la página actual
  • Gran total de datos presentes en todas las páginas

Puedo pasar los datos y leer los datos, la pregunta es cómo usar estos datos y crear dos filas de pie de página en jqgrid.

Alguna idea ?

Encontré la pregunta interesante, así que creé la demostración que demuestra una de la posible implementación de dos filas de pie de página:

enter image description here

La idea principal es agregar la segunda fila en la tabla donde ya existe el pie de página estándar. Para eliminar posibles problemas con otras partes del código footrow , footrow nombre de la clase footrow en la fila personalizada en myfootrow . Para tener la misma configuración de CSS para el segundo pie de página que el tooter original, incluí la copia de .ui-jqgrid tr.footrow td de ui.jqgrid.css con las mismas definiciones para .ui-jqgrid tr.myfootrow td :

 .ui-jqgrid tr.myfootrow td { font-weight: bold; overflow: hidden; white-space:nowrap; height: 21px; padding: 0 2px 0 2px; border-top-width: 1px; border-top-color: inherit; border-top-style: solid; } 

El código completo que encontrarás a continuación

 footerrow: true, loadComplete: function () { var $this = $(this), sum = $this.jqGrid("getCol", "amount", false, "sum"), $footerRow = $(this.grid.sDiv).find("tr.footrow"), localData = $this.jqGrid("getGridParam", "data"), totalRows = localData.length, totalSum = 0, $newFooterRow, i; $newFooterRow = $(this.grid.sDiv).find("tr.myfootrow"); if ($newFooterRow.length === 0) { // add second row of the footer if it's not exist $newFooterRow = $footerRow.clone(); $newFooterRow.removeClass("footrow") .addClass("myfootrow ui-widget-content"); $newFooterRow.children("td").each(function () { this.style.width = ""; // remove width from inline CSS }); $newFooterRow.insertAfter($footerRow); } $this.jqGrid("footerData", "set", {invdate: "Total (page):", amount: sum}); // calculate the value for the second footer row for (i = 0; i < totalRows; i++) { totalSum += parseInt(localData[i].amount, 10); } $newFooterRow.find(">td[aria-describedby=" + this.id + "_invdate]") .text("Grand Total:"); $newFooterRow.find(">td[aria-describedby=" + this.id + "_amount]") .text($.fmatter.util.NumberFormat(totalSum, $.jgrid.formatter.number)); } 

En el código, establezco información adicional en columnas invdate y amount del pie de página.