¿Cambia el tamaño de jqGrid según el número de filas?

Question

Quiero que mi jqGrid se reduzca y se expanda según el número de filas que tenga. Digamos que actualmente tiene 10 filas, la altura de jqGrid se reducirá a 10 filas (para que no queden abiertas las filas vacías).

Sin embargo, si hay demasiadas filas, la altura de la cuadrícula se ampliará a un valor máximo de "altura" y aparecerá una barra de desplazamiento.

Answer 1

Eso está integrado en la red. Establece height al 100%. There's a demo on this page si vas "Avanzado -> Cambiar el tamaño

Answer 2

llamada de la función debajo de afterInsertRow y cuando se elimina una fila:

function adjustHeight(grid, maxHeight){ 
    var height = grid.height(); 
    if (height>maxHeight)height = maxHeight; 
    grid.setGridHeight(height); 
} 

Answer 3

Probar:

jQuery(".ui-jqgrid-bdiv").css('height', jQuery("#bigset").css('height')); 

En la función de devolución de llamada jqGrid loadComplete#bigset.. es el id para la tabla que utilicé. Esto funcionó perfectamente para mí.

Answer 4

Aunque la altura del 100% wo estuvo bien en la demostración, no funcionó para mí. La cuadrícula se hizo mucho más grande, tal vez trató de ocupar la altura div de los padres. La solución de Amit funcionó perfectamente para mí, ¡gracias! (Soy nuevo como colaborador aquí, y por eso necesito una mayor 'reputación' para marcar cualquier voto :))

Answer 5

Me he enfrentado al problema similar y ninguna de las soluciones funcionó a la perfección. Algunos funcionan pero no hay barra de desplazamiento.

Así que aquí es lo que he hecho:

jQuery("#grid").jqGrid('setGridHeight', Math.min(300,parseInt(jQuery(".ui-jqgrid-btable").css('height')))); 

Este código tiene que ser colocado en el controlador LoadComplete y entonces funciona bien. El primer parámetro de Math.min es la altura deseada cuando hay suficientes datos para completar la lista. TEN EN CUENTA que este mismo valor debe establecerse como altura para la grilla. Este script elige el mínimo de la altura real y la altura deseada de la grilla. Entonces, si no hay suficientes filas, la altura de la cuadrícula se reduce; de ​​lo contrario, ¡siempre tendremos la misma altura!

Answer 6

Este es un método genérico que se me ocurrió basado en la solución de Amit. Le permitirá especificar el número máximo de filas para mostrar. Utiliza la altura del encabezado de la grilla para calcular la altura máxima. Es posible que necesite pellizcar si sus filas no tienen la misma altura que su encabezado. Espero eso ayude.

function resizeGridHeight(grid, maxRows) { 
    // this method will resize a grid's height based on the number of elements in the grid 
    // example method call: resizeGridHeight($("#XYZ"), 5) 
    // where XYZ is the id of the grid's table element 
    // DISCLAIMER: this method is not heavily tested, YMMV 

    // gview_XYZ is a div that contains the header and body divs 
    var gviewSelector = '#gview_' + grid.attr('id'); 
    var headerSelector = gviewSelector + ' .ui-jqgrid-hdiv'; 
    var bodySelector = gviewSelector + ' .ui-jqgrid-bdiv'; 

    // use the header's height as a base for calculating the max height of the body 
    var headerHeight = parseInt($(headerSelector).css('height')); 
    var maxHeight = maxRows * headerHeight; 

    // grid.css('height') is updated by jqGrid whenever rows are added to the grid 
    var gridHeight = parseInt(grid.css('height')); 
    var height = Math.min(gridHeight, maxHeight); 
    $(bodySelector).css('height', height); 
} 

Answer 7

Añadir a continuación código dentro de la función LoadComplete

var ids = grid.jqGrid('getDataIDs'); 
//setting height for grid to display 15 rows at a time 
if (ids.length > 15) { 
    var rowHeight = $("#"+gridId +" tr").eq(1).height(); 
    $("#"+gridId).jqGrid('setGridHeight', rowHeight * 15 , true); 
} else { 
//if rows are less than 15 then setting height to 100% 
    $("#"+gridId).jqGrid('setGridHeight', "100%", true); 
}