web-dev-qa-db-ja.com

行数に基づいてjqGridのサイズを変更しますか？

JqGridを、行数に基づいて縮小および拡大したいと思います。現在10行あるとすると、jqGridの高さは10行に縮小されます（ギャップのある空の行が表示されないようにするため）。

ただし、行が多すぎると、グリッドの高さが最大の「高さ」の値に拡張され、スクロールバーが表示されます。

javascriptjquerycssjqgrid
21
Rosdi Kasim

それはグリッドに組み込まれています。 heightを100％に設定します。 このページにデモがあります [詳細設定]-> [サイズ変更]に移動した場合。

19
Craig Stuntz

試してください：

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

JQGridコールバック関数loadComplete。 #bigsetは、私が使用したテーブルのidです。これは私にとって完璧に機能しました。

5
Amit Aggarwal

私は同様の問題に直面しましたが、どの解決策も私にとって完璧に機能しませんでした。一部は機能しますが、スクロールバーはありません。

これが私がしたことです：

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

このコードはloadCompleteハンドラーに配置する必要があり、それで正常に機能します。 Math.minの最初のパラメーターは、リストに入力するのに十分なデータがある場合の目的の高さです。これと同じ値をグリッドの高さとして設定する必要があることに注意してください。このスクリプトは、グリッドの実際の高さと目的の高さの最小値を選択します。したがって、十分な行がない場合はグリッドの高さが縮小され、そうでない場合は常に同じ高さになります。

3
Atticus

afterInsertRowから行を削除するときに、以下の関数を呼び出します。

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

デモでは高さ100％は問題なく機能しましたが、私には機能しませんでした。グリッドがはるかに大きくなり、親divの高さを占有しようとした可能性があります。アミットのソリューションは私にとって完璧に機能しました、ありがとう！ （私はここで寄稿者として新しいので、投票をマークアップするには、より高い「評判」が必要です:)）

1
msanjay

これは、Amitのソリューションに基づいて私が思いついた一般的な方法です。表示する行の最大数を指定できます。グリッドのヘッダーの高さを使用して、最大の高さを計算します。行がヘッダーと同じ高さでない場合は、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);
}
1
Walter Stabosz

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