tabulator - 自定义单元格格式化程序以隐藏/显示截断的文本

Question

我的表中的一列可以包含大量文本，几个段落。这会导致每一行都非常高并且表格不可读。

我想为此列设置一个自定义格式化程序，以在 X 个字符之后自动截断可查看的文本（X 是可配置的），并在该点之后包含省略号，然后显示“显示更多”链接。单击“显示更多”将显示单元格中的所有文本，导致行高扩展以显示所有文本，然后切换“显示更多”链接以显示“更少显示”。单击“少显示”将返回到单元格的截断视图。

我可以通过简单地从自定义格式化程序返回文本的前 X 个字符，然后是一个显示设置为 null 的包含其余文本的元素，来实现其中的一部分。单击“显示更多”会将元素的显示更改为内联。

从某种意义上说，这是可行的，因为在单击“显示更多”时会部分显示隐藏的文本，但仅会显示适合现有单元格大小的部分。其余部分被隐藏并添加了一个省略号。

例如，初始负载将显示：

敏捷的棕狐跳过懒惰的

...显示更多

然后切换后会显示：

敏捷的棕色狐狸跳过了懒惰的狗……[此省略号由 CSS 自动添加]

显示较少

如何让单元格展开以显示所有文本？

一个更棘手的版本是支持 HTML 内容，它不能被轻易截断，但仍然支持正确显示格式。text-overflow:ellipses 似乎可以解决这个问题，但我还没有弄清楚如何让它在这种情况下工作。实际上，如果可以使 text-overflow:ellipses 能够正常工作，它总体上可能是解决此问题的更简单的方法。

顺便说一句，另一种方法是在模式对话框中显示全文，尽管我还没有研究过这种方法。（我认为 Tabulator 不支持开箱即用的模式对话框，因此我需要添加一个，例如 jquery 的。请参阅： Does who have or know of any example of a custom popup editor for Tabulator?）

标签： tabulator