Handsontable，设置单元格中的可见行数

Posted 2023-03-22

【中文标题】Handsontable，设置单元格中的可见行数

【英文标题】：Handsontable, set number of visible rows in a cell

【发布时间】：2015-07-03 13:47:12

【问题描述】：

我在查找用于设置单元格中可见行数的动手表中的设置时遇到问题。问题是我在一个单元格中有一些 15 到 20 行的行，这使我的表格变得很大。我希望能够设置单元格中可见行的最大数量，并让用户能够在单元格中滚动以查看其其余内容。

感谢您的帮助！

回答下面关于单元格中多行的含义的评论：

这是一行：

Example of one line

这是多行：

multiline1
multiline2
multiline3

【问题讨论】：

“单元格中的行”是什么意思？

【参考方案1】：

在handsontable.full.css 文件中我添加了'white-space: nowrap;'并将多余的线条隐藏在一个单元格中。我还添加了“文本溢出：省略号；”在多行的单元格末尾添加一个省略号，以使外观更清晰。

以下是我修改的handsontable.full.css文件中的块：

.handsontable th,
.handsontable td 
  border-right: 1px solid #CCC;
  border-bottom: 1px solid #CCC;
  height: 22px;
  empty-cells: show;
  line-height: 21px;
  padding: 0 4px 0 4px;
  /* top, bottom padding different than 0 is handled poorly by FF with html5 doctype */
  background-color: #FFF;
  vertical-align: top;
  overflow: hidden;
  outline-width: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* preserve new line character in cell */

【讨论】：

我认为 OP 想要的是在单元格中有一个滚动窗格

另外，更改可动手操作的 css 文件可能不是最好的主意，因为对此的任何更新都会删除您的更改。最好覆盖css而不是更改它。当然在这种情况下，我认为 handsontable 可能不允许您更改 td css 所以它可能是唯一的解决方案

我查看并没有看到更改 td css 的选项，但这并不意味着没有。另外，我同意，更改 css 文件并不理想，但它确实完成了工作。

哦，是的，您通常做的是创建一个新文件并在可动手操作的文件之后加载它，以便它覆盖设置。我正是这个意思。但是，是的，HOT 做了一些动态 CSS 设置，无论如何都会覆盖这些设置，这使得最近很难接触 CSS

【参考方案2】：

如果您确实想要滚动，那么您应该做两件事。首先，您需要在热实例上设置width，这样您的列就不会变得太大。事实上，我也会设置colWidths 选项。

之后，您只需添加 CSS 规则：

.handsontable td 
    overflow-y: scroll;

这将导致溢出的文本（如多行）显示滚动条。要自己进行测试，请右键单击您正在谈论的单元格之一，然后单击“检查元素”。在右侧，找到“样式”选项卡，然后在 element.style 块中添加我上面写的属性。你会看到它工作的。