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

Question

我正在创建一个网站，其中网格可能有几行，也可能有很多。

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

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

我进行了搜索，发现有一个选项可以使网格自动调整为行数，但它显然与分页不兼容。

var gridOptions = { autoHeight:true };

如何让 slickgrid div 根据表格大小调整大小

似乎您也无法设置最大高度；它将继续扩展，直到显示所有内容。

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

Answer 1

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

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

希望这可以帮助！

Answer 2

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

1. maxHeight高度动态增长，并根据可见行数限制在某些范围内
2. 高度动态增长且不受限制（页面将滚动）
3. 高度是固定的和静态的（例如，如果只有 1 行，可能会显示空白）

基本上我autoHeight用于案例 #2 和案例 #1（但仅适用于案例 #1，如果行数小于所需的可见行数）。对于我使用的案例 #1rowHeight和我自己的发明，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();