Question

我正在创建一个网站，网格可能只有几行，或者可能有很多行。

当只有几行时，空格中的网格中浪费了大量空间。

理想情况下，我希望能够设置最小高度和最大高度，然后根据行数让光滑网格自动调整在该范围内。

我进行了搜索，发现可以选择将网格自动调整为行数，但显然与分页不兼容。

var gridOptions = { autoHeight:true };

How to get slickgrid div to resize with size of table

似乎你无法设置最大高度;它将继续扩展，直到所有内容都显示出来。

有没有人有任何解决方案或建议？

Answer 1

我认为您需要调整周围DIV的高度，而不是调整网格大小。 SlickGrid的高度是根据初始化的DIV的高度计算的。因此，理论上，您可以根据您拥有的数据量修改DIV的高度，然后手动初始化网格。

检查此链接以获取有关网格显式初始化的示例： http://mleibman.github.com/SlickGrid/examples/example-explicit-initialization.html

希望这有帮助！

Answer 2

以下是我处理三种不同“身高”情况的方法：

根据可见行数

maxHeight

高度动态增长且不受约束（页面将滚动）
高度是固定的并且是静态的（例如，如果只有一行，则可以显示空白）

基本上我对案例＃2使用autoHeight，对案例＃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();

是否有可能使光滑的网格控件自动调整其高度，使其达到最小 - 最大范围，以适应行数？

2 个答案: