web-dev-qa-db-ja.com

SlickGridで列のサイズを自動調整するにはどうすればよいですか？

Slickgridで、最も幅の広いコンテンツまたはヘッダーテキスト（どちらか広い方）に基づいて列のサイズを自動調整します。より簡単に言えば、列のサイズ変更に関して、通常のHTMLテーブルのデフォルトの動作をシミュレートしたいと思います。スリックグリッドでそれを行うにはどうすればよいですか？

slickgridautosizetablecolumn
44
PJ.

オプションを作成するときは、forceFitColumns: trueを使用できます

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

これにより、列がグリッドdivの幅全体に表示されます。

22
csigrist

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

私はこの機能を追加しましたが、ご想像通りのマニュアルです。表示されたセルをループしてそれぞれを測定し、最も広いセルを保存し、その幅を使用して列の幅を設定します。 SlickGridを使用すると、ビューポートのセルに適切にアクセスできるため、うまく機能します。

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

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

4
SimplGy

Slickgridは、データに基づく列の自動サイズをサポートしません。変更するには、プラグインを作成するか、slickgridコアをフォークする必要があります。

これが、slickgridの自動サイズを処理するプラグインを作成したリンクです https://github.com/naresh-n/slickgrid-column-data-autosize

3
Naresh Nagabhushanam

これはグリッドが描画された後に追加したもので、正常に機能します。

$(window).resize(function() {
var cols = grid.getColumns();
grid.setColumns(cols);
})
3
Kirk Ross

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

grid.autosizeColumns();
1
njr101

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

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

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

0
William