handsontable - 为表格单元格设置最大宽度和最大高度

Question

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

我试图通过 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，请更正它(这就是我在这里和 fiddle 中所做的)。然后你设置最大/最小宽度的数组(当然你可以在你的代码中更优雅地做到这一点)。

然后通过查看跨度的父级的父级来获取相关列的实际当前宽度(这有点困惑，但这是我发现的最简单的方法)。后面的条件应该是不言自明的。

最后，重要的部分。您可以通过访问 hot.manualColumnWidths 看到这一点。你可以设置你想要的宽度。如果我当前的宽度超过它，我将它设置为最大值。然后只需重新渲染即可完成!

有一些问题，例如这些事件仅在调整大小后才被调用，因此如果您最初将表格设置为以大于最大值的宽度呈现，则它不会做任何事情。如果是这种情况，只需在第一次渲染表后调用此函数(每列调用一次)。

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

希望这可以帮助! Here是一个演示 fiddle ，展示了它的实际效果:D