Ridimensiona jqGrid in base al numero di righe?

Question

Voglio che il mio jqGrid si riduca e si espanda in base al numero di righe che ha. Diciamo che attualmente ha 10 righe, l'altezza di jqGrid si ridurrà a 10 righe (in modo che non vengano esposte righe vuote aperte).

Se tuttavia ci sono troppe righe, l'altezza della griglia si espanderà fino al valore di 'altezza' massimo e verrà visualizzata una barra di scorrimento.

Answer 1

Questo è integrato nella griglia. Imposta height al 100%. There's a demo on this page se si va "Avanzate -> Ridimensionamento

Answer 2

chiamata la funzione qui sotto da afterInsertRow e quando si elimina una riga:

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

Answer 3

Prova:

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

Nella funzione di callback jqGrid loadComplete#bigset.. è il id per il tavolo che ho usato.Questo ha funzionato perfettamente per me.

Answer 4

Anche se l'altezza al 100% wo ha funzionato bene nella demo, non ha funzionato per me. La griglia è diventata molto più grande, forse ha cercato di occupare l'altezza del div del genitore. La soluzione di Amit ha funzionato perfettamente per me, grazie! (Sono nuovo come contributore qui, e quindi ho bisogno di una "reputazione" più alta per marcare i voti in alto :))

Answer 5

Ho affrontato il problema simile e nessuna delle soluzioni ha funzionato perfettamente per me. Alcuni funzionano ma poi non c'è la barra di scorrimento.

Così qui è quello che ho fatto:

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

Questo codice deve essere posizionato nel gestore loadComplete e poi funziona benissimo. Il primo parametro di Math.min è l'altezza desiderata quando vi sono dati sufficienti per compilare l'elenco. NOTA che questo stesso valore deve essere impostato come altezza per la griglia. Questo script sceglie il minimo dell'altezza effettiva e l'altezza desiderata della griglia. Quindi se non ci sono abbastanza righe l'altezza della griglia viene ridotta, altrimenti abbiamo sempre la stessa altezza!

Answer 6

Ecco un metodo generico che ho trovato basato sulla soluzione di Amit. Ti consentirà di specificare il numero massimo di righe da visualizzare. Usa l'altezza dell'intestazione della griglia per calcolare l'altezza massima. Potrebbe essere necessario tweeking se le tue righe non hanno la stessa altezza della tua intestazione. Spero che sia d'aiuto.

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

Aggiungi al di sotto di codice all'interno funzione 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); 
}