6

グリッドの行数が少ない、または多い Web サイトを作成しています。

数行しかない場合、グリッドの空きスペースに多くのスペースが無駄になります。

理想的には、最小の高さと最大の高さを設定し、行数に基づいてその範囲内で滑らかなグリッドの自動サイズを設定できるようにしたいと考えています。

検索したところ、グリッドを行数に合わせて自動サイズ変更するオプションがあることがわかりましたが、ページングとは明らかに互換性がありません。

var gridOptions = { autoHeight:true };

テーブルのサイズに合わせてslickgrid divのサイズを変更する方法

また、最大の高さを設定できないようです。すべてが表示されるまで拡大し続けます。

誰にも解決策や提案はありますか?

4

2 に答える 2

3

グリッドのサイズを変更するのではなく、周囲の DIV の高さを調整する必要があると思います。SlickGrid の高さは、初期化された DIV の高さに基づいて計算されます。したがって、理論的には、所有しているデータの量に基づいて DIV の高さを変更し、グリッドを手動で初期化することができます。

グリッドの明示的な初期化の例については、このリンクを確認してください: http://mleibman.github.com/SlickGrid/examples/example-explicit-initialization.html

お役に立てれば！

于 2012-08-15T13:43:49.177 に答える
1

3つの異なる「高さ」のケースを処理する方法は次のとおりです。

  1. 高さは動的に増加し、表示される行の数maxHeightに基づいて制限されます
  2. 高さは動的に増加し、制約はありません (ページはスクロールします)
  3. 高さは固定で静的です (たとえば、1 行のみの場合は空白が表示される場合があります)。

基本的にautoHeight、ケース #2 とケース #1 に使用します (ただし、行数が目的の表示行数より少ない場合はケース #1 のみ)。ケース＃1の場合rowHeight、私は自分の発明を使用して、maxVisibleRows開発者に「このテーブルはスクロールを開始する前に5行まで成長し、スクロール可能な領域の高さは5行の高さの合計に等しい」と言わせます。ケース #3 の場合、SlickGrid のデフォルトの動作である単純な親の高さの制約です。

サンプルコード:

    var parentContainer = document.getElementById("slick_container");
    var uniqueRecordIdField = "id";
    var rows = [{id: 1, product: "Bells"}, {id: 2, product: "Whistles"}]; // data (array of rows)
    var maxVisibleRows = 3; // user can see 3 rows without scrolling

    var HeightOptions = { Static:0, Auto:1, Max:2 }; // "enum" for illustrative purposes

    var HeightOption = HeightOptions.Auto; // dev would set this somehow
    var options = { ... }; // slick grid options object
    var parentHeight = "";
    switch (HeightOption)
    {
      case HeightOptions.Static:

        parentHeight = "400px;" // (hardcoded default/example; probably should allow override)
        options.autoHeight = false; // do not use slickgrid auto height
        break;

      case HeightOptions.Max:

        // use # of rows to determine whether table should be scrollable
        if (maxVisibleRows > 0 && rows.length > maxVisibleRows)
        {
           var arbitraryHeightPadding = 14; // style hack for viewport
           // constrain height to only show X rows
           parentHeight = ((options.rowHeight * maxVisibleRows) + arbitraryHeightPadding) + "px";
           options.autoHeight = false; // do not use slickgrid auto height
        }
        else
        {
          // use slickgrid autoHeight to allow height to shrink / grow
          parentHeight = "";
          options.autoHeight = true;
        }
        break;

      case HeightOptions.Auto:
      default:

        parentHeight = ""; // or could use 'inherit' or 'auto' or whatever probably
        options.autoHeight = true; // use slickgrid auto height to grow indefinitely
        break;
    }

    // set height of slick grid parent (container)    
    parentContainer.style.height = parentHeight;

   // do normal slick grid rendering stuff... 
   DataView.onRowCountChanged.subscribe(function (e, args)
   {
      Grid.updateRowCount();
      Grid.render();
   });    
   DataView.beginUpdate();
   DataView.setItems(rows, uniqueRecordIdField);
   DataView.endUpdate();
于 2014-11-18T22:36:08.380 に答える