具有行索引的 Vaadin 流网格答案

【问题标题】：Vaadin Flow Grid with Row-Index具有行索引的 Vaadin 流网格
【发布时间】：2020-09-15 13:48:46
【问题描述】：

如何将行索引列添加到网格中，该列不会按照用户对行的排序进行排序？

解决方案不得包括对任何聚合物模板的更改，而应在 java 中完成。

【问题讨论】：

标签： vaadin vaadin-flow vaadin-grid vaadin14

【解决方案1】：

索引从 0 开始

grid.addColumn(TemplateRenderer.of("[[index]]"));

这行得通，因为在网格的前端部分已经有一个可用于每一行的索引属性。

索引从 1 开始

编辑：这实际上是比我之前提出的方法更更简单的方法。您可以使用 executeJS 为 Web 组件设置客户端渲染器。
是的，它仍然有点“hacky”，但它仍然比我自己的方法好几英里。

grid.addColumn(item -> "").setKey("rowIndex");

grid.addAttachListener(event -> {
    grid.getColumnByKey("rowIndex").getElement().executeJs(
            "this.renderer = function(root, column, rowData) {root.textContent = rowData.index + 1}"
    );
});

相关 github 和 vaadin-forum 线程：

https://vaadin.com/forum/thread/17471146/grid-start-row-count-from-1,
https://github.com/vaadin/vaadin-grid/issues/1386,
https://vaadin.com/forum/thread/18287678/vaadin-grid-exclude-specific-column-from-sorting,
https://github.com/vaadin/vaadin-grid-flow/issues/803

【讨论】：

这正是我所需要的。感谢您提供详细的答案。我想知道为什么没有官方的方式来做到这一点，尽管这个问题已经被多次提出。我将对其进行测试并更新结果。
这里报告了同样的问题：github.com/vaadin/vaadin-grid-flow/issues/803
@kscherrer 是的，刚刚测试过。现在就像一个魅力。感谢您的时间和努力。
这是非常酷的 hack。我不知道以这种方式可以在网格上使用 java 执行 js。再次感谢@kscherrer！你拯救了我的一天。
如果网格是分页的。当我转到第二页时。索引再次从 1 开始。有什么方法可以在分页网格的第二页中继续行索引值？