私は多数のスリックグリッドを作成しましたが、これは私が作成している最初のものであり、列のサイズを変更したり並べ替えたり (ドラッグ可能) できないようにする必要があります。私が本当に必要としているのは、列が常にビューポートに収まるようにすることですが、サイズ変更/並べ替えはできず、画面のサイズ変更 (増加または減少) 中に水平方向に拡張しないことです。
これを列オプションに入れると、それがわかりました。:'
resizable: false
これによりサイズが変更されなくなりますが、これを行うと、ページの読み込み時に列のサイズが列ごとに指定した幅に変更されます。これは通常私が望むものですが、ビューポートの特定の幅は 1300px です。したがって、ピクセルを適切に設定すると、グリッドはビューポートで適切に動作し、見栄えがよくなります。ただし、私が取り組んでいるこのアプリケーションでは、画面を最小化または最大化する機能が必要です。そうすると、特定の幅に設定された列がその幅のままになり、水平スクロールバーが表示され、列が 1300px の範囲を超えて押し出されます。
列幅を削除して forcefitcolumns を保持すると、列が非常に小さくなり、見栄えが悪くなります。
私のコラムの例。:
{ id: "Mode", name: "Mode", field: "Mode", width: 125, sortable: true, formatter: TaskNameFormatter, editor: Slick.Editors.Text, resizable: false },
私のグリッドオプションの例。:
var GridOptions = {
showHeaderRow: true,
showHeaderRow: true,
headerRowHeight: 30,
explicitInitialization: true,
enableCellNavigation: true,
enableTextSelectionOnCells: true,
forceFitColumns: true,
multiColumnSort: true,
topPanelHeight: 25,
autoHeight: true,
enableColumnReorder: false
};
私のグリッドdivの例。:
<div id="slickGrid" class="grid-body" style="min-width: 800px; max-width: 1300px; height: auto;"></div>
そして明らかに、グリッドのサイズ変更があります。:
$(window).resize(function () {
Grid.resizeCanvas();
});
この状況をどのように処理するのか疑問に思っています。基本的には、ビューポートを水平方向に塗りつぶし、ウィンドウのサイズ変更中でもそのサイズを維持するために列が必要です。考え?誰かが以前にこの問題を打ち負かしたことがありますか? 列をビューポートの適切なサイズに動的に維持する方法を理解できれば、ウィンドウのサイズ変更中にそれを再度呼び出すことができます。
***注: Grid.autosizeColumns も試して、各列の最小幅を設定しましたが、どちらも機能しません。