滑らかなグリッドコントロールで行の数に合わせて最小から最大までの高さに自動的にサイズを変更できますか？

Question

私は、グリッドに行が少なくて済むウェブサイトを作成しています。

わずかな行がある場合、空きスペースのグリッドには多くのスペースが無駄になります。

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

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

var gridOptions = { autoHeight:true }; 

How to get slickgrid div to resize with size of table

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

解決策や提案がありますか？

Answer 1

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

グリッドの明示的なinitの例を確認し、このリンクを： http://mleibman.github.com/SlickGrid/examples/example-explicit-initialization.html

・ホープ、このことができます！

Answer 2

は、ここで私は、3つの異なる「高さ」ケースを扱う方法は次のとおりです。

1. 高さを動的に成長し、見える行
2. の＃高さを動的に成長し、制約されない（ページに基づいていくつかのmaxHeightに拘束されます
3. 高さが固定され、静的である）スクロールする（例えばのみ1行、場合空白を示してもよい）

基本的には、ケース＃2の場合とケース＃1の場合（ケース＃1の場合のみ、行数が表示可能な行数より少ない場合）のautoHeightを使用します。ケース＃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();