Question

是否可以为Handsontable中的单元格设置max-width和max-height？

我尝试通过CSS在<th>和<td>元素上进行设置，但这不起作用。

我在文档中看到，您可以将列设置为特定宽度，但不是最大值。

Answer 1

因此，解决方案是使用您的HOT实例的manualColumnWidths数组。此数组将自动设置所有列的宽度。它嵌套在代码中的某个地方，以便随时更新它更新的DOM，这就是为什么在元素宽度上使用CSS或jQuery本身并不起作用的原因。它是一个很好的结构，我们只需要在某处更明确地编写它。

请注意，您只需使用rows以及其他manualRowHeights方法，即可为row重复此操作。

现在，您可以在此处设置列调整大小事件的最大值和最小值。将afterColumnResize选项设置为以下函数：

function setAfterColumnResize() {
  return function(col, size) {

    var headers = $(".colHeader"); // first is empty if there are rowHeaders
    var maxW = [10, 200, 400]; // note that the first is the row header
    var minW = [1, 100, 100]; // note that the first is the row header

    var actualCol = col + 1; // this is to account for the row header

    var maxColW = maxW[actualCol];
    var minColW = minW[actualCol];
    var actualW = $(headers[actualCol]).parent().parent().width();

    if (hot && maxColW && actualW > maxColW) {
      hot.manualColumnWidths[col] = maxColW;
      hot.render()
    }

    if (hot && minColW && actualW < minColW) {
      hot.manualColumnWidths[col] = minColW;
      hot.render()
    }
  }
}

现在让我解释一下。触发此事件时，首先使用它为您提供的col索引查找标头。如果您将行标题设置为true（这是我在这里和小提琴中所做的），请更正它。然后设置最大/最小宽度的数组（当然，您可以在代码中更优雅地执行此操作）。

然后通过查看父节点的父节点来获取相关列的实际当前宽度（这有点乱，但这是我发现的最简单的方法）。有条件的后应该是自我解释的。

最后，重要的一点。您可以通过访问hot.manualColumnWidths来查看，您可以设置所需的宽度。如果我当前的宽度超过它，我将其设置为最大值。然后重新渲染，你就完成了！

有一些问题，比如这些事件只有在调整大小后才被调用，所以如果你最初将表格设置为渲染宽度大于最大值，那么它就不会做任何事情。如果是这种情况，只需在第一次渲染表后调用此函数（每列调用一次）。

如果您不想使用列调整大小事件，也会出现这种情况;在这种情况下，它只是在渲染后调用的普通函数。

希望这有帮助！ Here是一个演示小提琴，展示了它的实际效果：D

设置表格单元格的最大宽度和最大高度

1 个答案: