Größe jqGrid basierend auf der Anzahl der Zeilen?

Question

Ich möchte meine jqGrid verkleinern und erweitern basierend auf der Anzahl der Zeilen, die es hat. Nehmen wir an, es hat derzeit 10 Zeilen, die Höhe von jqGrid wird auf 10 Zeilen verkleinert (so dass keine leeren leeren Zeilen offen liegen).

Wenn jedoch zu viele Zeilen vorhanden sind, wird die Höhe des Rasters auf einen maximalen Wert für die Höhe erweitert, und eine Bildlaufleiste wird angezeigt.

Answer 1

Das ist in das Raster eingebaut. Sie setzen height auf 100%. There's a demo on this page wenn Sie auf Erweitert gehen“-> Ändern der Größe

Answer 2

Aufruf der unten Funktion von afterInsertRow und beim Löschen einer Zeile:

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

Answer 3

Versuchen:

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

Im jqGrid Callback-Funktion loadComplete#bigset.. ist die id für die Tabelle, die ich verwendete.Dieses funktionierte tadellos für mich

Answer 4

Obwohl die Höhe 100% wo In der Demo ging es gut, bei mir lief es nicht. Das Gitter wurde viel größer, vielleicht versuchte es die Höhe des Elternteils zu besetzen. Amits Lösung hat perfekt für mich funktioniert, danke! (Ich bin neu hier als Mitwirkender und brauche daher eine höhere Reputation, um alle Voten zu markieren :))

Answer 5

Ich habe mich mit dem ähnlichen Problem konfrontiert und keine der Lösungen funktionierte perfekt für mich. Einige arbeiten, aber dann gibt es keine Bildlaufleiste.

So, hier ist das, was ich getan habe:

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

Dieser Code hat in dem Loadcomplete-Handler platziert wird und dann funktioniert es gut. Der erste Parameter von Math.min ist die gewünschte Höhe, wenn genügend Daten zum Füllen der Liste vorhanden sind. Beachten Sie, dass derselbe Wert als Höhe für das Raster festgelegt werden muss. Dieses Skript wählt das Minimum der tatsächlichen Höhe und der gewünschten Höhe des Gitters. Wenn also nicht genügend Zeilen vorhanden sind, wird die Rasterhöhe verkleinert, sonst haben wir immer die gleiche Höhe!

Answer 6

Hier ist eine generische Methode, die ich basierend auf Amits Lösung entwickelt habe. Sie können die maximale Anzahl der anzuzeigenden Zeilen angeben. Es verwendet die Kopfhöhe des Rasters, um die maximale Höhe zu berechnen. Möglicherweise müssen Sie nachlesen, ob Ihre Zeilen nicht die gleiche Höhe wie die Kopfzeile haben. Ich hoffe es hilft.

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

unter Code in Loadcomplete-Funktion hinzufügen

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); 
}