Изменить размер jqGrid на основе количества строк?

Question

Я хочу, чтобы мой jqGrid сокращался и расширялся в зависимости от количества строк, которые он имеет. Пусть говорят, что в настоящее время он имеет 10 строк, высота jqGrid будет уменьшаться до 10 строк (чтобы не было открытых открытых строк).

Если, однако, слишком много строк, высота сетки будет увеличиваться до максимального значения «высота», и появится полоса прокрутки.

Answer 1

Это встроенный в сетку. Вы устанавливаете height на 100%. There's a demo on this page если вы идете «Дополнительно -> Resizing

Answer 2

вызов ниже функции от afterInsertRow и при удалении строки:

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

Answer 3

Try:

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

В функции loadComplete обратного вызова jQGrid #bigset.. это id для таблицы, которую я использовал. Это отлично сработало для меня.

Answer 4

Хотя высота 100% wo В демонстрационном режиме это не сработало. Сетка стала намного больше, возможно, она пыталась занять родительский div. Решение Amit отлично работает для меня, спасибо! (Я новичок в качестве вкладчика, и поэтому мне нужна более высокая «репутация», чтобы отметить любые голоса :))

Answer 5

У меня возникла аналогичная проблема, и ни одно из решений не работало идеально для меня. Некоторые работы, но тогда нет полосы прокрутки.

Так вот что я сделал:

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

Этот код должен быть помещен в обработчик loadComplete, а затем он работает отлично. Первым параметром Math.min является желаемая высота, когда для заполнения списка достаточно данных. Учтите, что это же значение должно быть задано как высота для сетки. Этот скрипт выдает минимальную фактическую высоту и желаемую высоту сетки. Так что, если не хватает строк, высота сетки сжимается, в противном случае у нас всегда будет одинаковая высота!

Answer 6

Вот общий метод, который я придумал на основе решения Амита. Это позволит вам указать максимальное количество отображаемых строк. Он использует высоту заголовка сетки для вычисления максимальной высоты. Возможно, вам потребуется tweeking, если ваши строки не имеют той же высоты, что и ваш заголовок. Надеюсь, поможет.

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

Добавить ниже код внутри функции 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); 
}