4

Slickgridで、最も幅の広い行の内容に応じて列幅のサイズが自動的に変更される方法はありますか？

サンプルの例では、列フィールドhttp://mleibman.github.com/SlickGrid/examples/example2-formatters.htmlにハードコードされた列の値を確認できます。

var columns = [
    {id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", formatter: formatter},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar},
    {id: "start", name: "Start", field: "start", minWidth: 60},
    {id: "finish", name: "Finish", field: "finish", minWidth: 60},
    {id: "effort-driven", name: "Effort Driven", sortable: false, width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark}
  ];
4

3 に答える 3

7

オプションを使用するforceFitColumnsと、各列のサイズが収まるようにサイズ変更されますが、幅が十分に広くない場合は、幅の最小値と最大値に従って収まろうとするため、aminWidthとaを追加することをお勧めしmaxWidthます。もう少し制御。

たとえば、列の定義は次のようになります。

{id: "duration", name: "Duration", field: "duration", minWidth:50, width:100, maxWidth:120}

そしてこのようなオプションの定義：

options = {
        enableCellNavigation: true,
        enableColumnReorder: false,
        multiColumnSort: true,
        asyncEditorLoading: true,
        forceFitColumns: true // this one is important        
    };
于 2013-03-04T15:54:21.487 に答える
6

はい、それに追加します。これにより、行の仮想化の全体的なポイントが失われます。ただし、データセットが小さい場合は、事前に計算することができます。これは、テキストの幅を計算するために使用した関数です。

 String.prototype.textWidth = function(font) {
    var f = font || '12px Helvetica,​Arial,​sans-serif',
      o = $('<div>' + this + '</div>')
            .css({'position': 'absolute', 'float': 'left', 'white-space': 'nowrap', 'visibility': 'hidden', 'font': f})
            .appendTo($('body')),
      w = o.width();

    o.remove();
  return w;
}

私がしたことは、ヘッダーのtextWidth（）を計算することでした。「名前」の値。したがって、少なくとも列はヘッダーテキストの幅です。仮想化を気にせずにできること。Fx..。

columns.push({ id: "col1", name: "Column 1", field: "col1", width: "Column 1".textWidth() + <Some padding?>});

または、本当にデータ配列全体をスキャンして、列/フィールドの各データ値に対して関数を呼び出し、最大値を維持する場合。しかし、これは非常に非効率的です。

于 2013-03-29T13:11:30.357 に答える
0

はい、コンテンツに合わせて成長させることはできますが、自分で行う必要があります。forceFitColumns近くに聞こえますが、セルの内容に関係なく、ビューポートを埋めるように成長します。

@Timのアイデアは正しいですが、行の仮想化のポイントから離れるとは言えません。SlickGridを使用すると、ビューポートに簡単にアクセスできるため、ビューポートgrid.getViewport().top // bottom内のコンテンツのみのサイズを非常にうまく計算できます。

私はこの同様の質問に答えてここでどのように説明します：https ：//stackoverflow.com/a/22231459

于 2014-03-06T17:26:13.987 に答える