Slickgrid 是否可以使平滑栅格控件自动调整其高度，使其在最小-最大范围之间，以适应行数？

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

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

理想情况下，我希望能够设置一个最小高度和一个最大高度，然后根据行数自动调整平滑网格的大小

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

var gridOptions = { autoHeight:true };

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

---

有人有什么解决方案或建议吗？

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

检查此链接以获取有关网格显式初始化的示例：

---

希望这有帮助

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

高度动态增长，并根据可见行数限制为某些

maxHeight

高度动态增长且不受限制（页面将滚动）

高度是固定的和静态的（例如，如果只有一行，则可能显示空白）

基本上，我对案例2和案例1使用

autoHeight

（但仅当行数小于所需的可见行数时，才对案例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();

---

感谢您的回复：）这当然是一种调查方法。我有一种感觉，在初始化后添加或删除行时，调整网格的大小不会很好。您可以在添加新行和删除时重新调整网格。我知道这是一种解决方法，但网格从其父DIV接管属性-因此我认为这是一种方法。请注意，这不包括

minHeight

的情况，但要实现这一点，您可以将示例类似地扩展到

maxHeight

方法。虽然在我的客户实践中，我从来没有收到过这样的请求（从来没有人说过，“我想要一个至少5行高的表（即使表的行数少于5行），但在10行高时可以滚动”）。通常它要么是固定高度（以获得浮动标题的好处，无论滚动位置如何都可见），要么在滚动前增加到最大行数。