45

slickgrid で、最も幅の広いコンテンツまたはヘッダー テキストに基づいて列のサイズを自動調整したいと考えています。簡単に言えば、列のサイズ設定に関しては、通常の HTML テーブルのデフォルトの動作をシミュレートしたいと考えています。どうすればslickgridでそれを行うことができますか?

4

7 に答える 7

22

オプションを構築するときは、次を使用できますforceFitColumns: true

var options = {
    enableCellNavigation: true,
    forceFitColumns: true
};

これにより、列がグリッド div の幅全体を埋めます。

于 2012-01-17T22:30:59.460 に答える
5

OP は、コンテンツに合わせて成長する列を探しています。grid.autosizeColumns()親コンテナーに合わせてセルを成長させますが、これは同じことではありません。

この機能を追加しましたが、ご想像のとおり手動です。表示されたセルをループして各セルを測定し、最も幅の広いセルを保存し、その幅を使用して列の幅を設定します。SlickGrid を使用すると、ビューポート内のセルに簡単にアクセスできるため、うまく機能します。

測定アルゴリズムはあなたの大きな決断です。@jay が示唆するように、コンテンツを画面の外に出して測定することができます。これは機能しますが、挿入するときに再描画が必要で、削除するときに再描画が必要なため、最も遅い方法です。最適化する方法があるかもしれません。私が行った解決策は、アルファベットのすべての文字と、遭遇する他の印刷文字の幅を測定し、それらを合計して幅を生成することです. はい、これはばかげているように聞こえます。多くの制約があります: フォント サイズは同じでなければならない、画像をサポートしていない、改行を含めることはできません。<5msただし、文字幅は 1 回しか測定されないため、制約を受け入れることができる場合は、巨大なグリッド ビューポートのサイズを で計算できます。

列のサイズを取得したら、 を使用してそれらを列に割り当てますgrid.setColumns()。

于 2014-03-06T17:18:02.693 に答える
3

グリッドが描画された後にこれを追加しましたが、正常に動作します。

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
于 2015-04-23T22:51:35.627 に答える
1

autosizeColumns()グリッド オブジェクトのメソッドを呼び出すことができるはずです。

grid.autosizeColumns();
于 2011-11-07T14:22:07.600 に答える
0

関数でNaresh のhttps://github.com/naresh-n/slickgrid-column-data-autosizeを簡単に調整します。init

  • $container.ready(resizeAllColumns);init 関数に追加します。

これにより、初期ロード時に列が自動サイズ変更されます

于 2015-11-10T11:18:24.193 に答える
-1

画面外の要素にテキストを挿入し、要素の幅を取得します。これは、excanvas がテキストを測定するために行うことです。ピクセル値が必要なため、これを使用して列の幅を設定します。

于 2013-06-08T00:55:09.117 に答える