Javascript 可变行高在SlickGrid中是否有可能？

我想根据内容大小提供可变的行高。这有可能吗

---

你能给我举一些例子吗？

简单明了，这在SlickGrid中是不受支持的，而且可能永远不会得到支持。抱歉。

这是可能的，但这并不是小事，您可能会受到性能方面的处罚。SlickGrid的工作方式需要能够快速回答以下两个问题：

• 对于给定的X行，该行的顶部偏移量是多少
• 对于给定的偏移量Y，哪个行位于该偏移量处

当您使用静态行高时，回答这些问题很简单；但是，对于动态行高，您需要维护一些额外的数据结构

下面是我在Slick.Grid.js中所做的大致更改

• 添加新数组以跟踪行大小。将所有行初始化为默认大小
• 删除createCssRules中设置单元格高度的css规则
• 在renderRows的末尾添加一些代码，检查行中每个单元格的渲染高度，然后将所有单元格的高度设置为最大值（并将高度存储在行大小数组中）。您还需要根据当前行上方行的高度之和调整顶部偏移
• 将代码添加到渲染的末尾，以将画布调整为所有行高度的总和
• 更新getViewport以基于行高度之和返回顶行和底行
• 还有一些其他地方使用了options.rowHeight。您可以忽略其中一些，但至少在调整画布大小的任何地方都需要更改

为了实现这一点（性能），您还需要行顶偏移量缓存（行大小总和缓存）。这将使第一个问题能够快速计算，并允许二进制搜索来回答第二个问题

---

我希望这能有所帮助。

我知道这并不符合问题的核心，但现在决定采用一种简单的解决方案，这是一种最省力的解决方案，满足我目前的要求。所以，这只是为了防止其他人也在寻找一个简单的解决方案

我从一个输入框开始，在这里更改值将调整行的大小。不过，我现在决定使用滑块。事实上，由于我的网格中只有很少的数据（保证数据量很小，而且只有很少的行），所以当滑块滑动时，我会动态调整网格的大小。现在，我知道很多人会说这是一个糟糕的想法，因为它可能会非常慢，但同样，我使用的数据量非常小

关键是我使用选项中设置的新行高值重新创建网格

包括jQuery用户界面：

为滑块和值创建元素

确保在页面加载时设置并初始化网格

添加代码来处理滑块并重新创建网格（或者，如果您不想在每个滑动刻度上重新绘制，您可以将“slide”函数中的内容移动到“stop”函数）：

---

此外，我应该注意到，这并不是以每行为基础的，但它再次符合我目前的需要。这并不理想，但很有效。此外，如果确实需要在第一次渲染网格时不出现任何溢出，则可以在获得相关文本并添加

display:table cell

时创建隐藏的div，然后获取div高度并将该值设置为rowHeight的网格选项。然后，创建（或重新创建）网格。

在@Stephen Robinson的回答的帮助下，我在我的项目中实现了这一点。
如果有人感兴趣，他们可以查看：

如果您将options.enableWrap设置为true，则可以使用上述文件启用它。

---

谢谢。

对于Vihari Piratla的解决方案，我已经下载了Seaview，修改了它的/SlickGrid master/examples/example1-simple.html以添加新的选项enableWrap。在我的测试中，当enableWrap设置为false时，example1-simple.html会像预期的那样继续工作，但当它设置为true时，网格将被绘制为空，没有内容。我想知道是否有特殊的方式使用enableWrap选项？

github上的JLynch7还实现了可变高度：

---

据我所知，高度是由用户设置的，而不是根据行单元格的内容自动计算的（我只查看了示例/示例变量row height dataview.html）

我最近分叉了SlickGrid以添加一系列新功能，包括可变（和可调整大小的）行。您可以在此处尝试：

在外部定义此变量

var表高=0

创建平滑栅格之前，请在线条下方使用：

//每行30像素这将覆盖收割台。。。您可以为表格调整此值

tableHeight = dataTable.length * 30;    

if(tableHeight >  ($(window).height() - 400)){
       $("#myGrid").height($(window).height() - 400);
}else{
       $("#myGrid").height(tableHeight);
}

如果用户在页面已生成时更改屏幕，则以下命令将根据屏幕和数据行数调整表的大小：

    $(window).resize(function() {

    // For grid height
    if(tableHeight >  ($(window).height() - 400)){
        $("#myGrid").height($(window).height() - 400);
    }else{
        $("#myGrid").height(tableHeight);
    }

    // For grid width
    $("#myGrid").width("100%");

    // Resize the grid dynamically. 
    gridName.resizeCanvas();
});

---

作为对上述选项的总结，它们都不是官方的、受支持的和可生产的。即使是doby grid选项（更受支持）仍被列为未准备生产

注意，以下各项之间也存在差异：

• 每行的行高可以单独更改
• 文本可以环绕到下一行
• 行高度可以自动调整以适应内容

令人惊讶的是，使用上面所有的SlickGrid变体（以及许多其他DataGrid库），您可能会得到上面的一个或两个，但不是全部三个

如果您不太关心官方、支持和生产准备，那么以下是我对测试上面列出的3个SlickGrid变体的印象：

海景

• 用户报告仅显示白色、未使用编辑单元格测试（警告）、分页可能无法工作（警告）时出现问题
• 我对这个演示的测试发现它包装了文本并自动改变了单元格的高度，但是有一个bug

      $(window).resize(function() {
  
      // For grid height
      if(tableHeight >  ($(window).height() - 400)){
          $("#myGrid").height($(window).height() - 400);
      }else{
          $("#myGrid").height(tableHeight);
      }
  
      // For grid width
      $("#myGrid").width("100%");
  
      // Resize the grid dynamically. 
      gridName.resizeCanvas();
  });