Vaadin Flow中的带有行索引的表格

Question

我该如何在一个网格中添加一列用于显示行索引，且不会随着用户对行的排序而排序？

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

- kscherrer

Answer 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 论坛帖子：

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

- kscherrer

---

这正是我所需要的。感谢您提供详细的答案。我想知道为什么尽管这个问题已经被提出了很多次，但没有官方的解决方法。我会测试并更新结果。 - Aman Verma

这是一个相当酷的技巧。我不知道在网格上使用Java执行JS是以这种方式可能的。再次感谢@kscherrer！你救了我的一天。 - Aman Verma

如果网格被分页，当我跳转到第二页时，索引会重新从1开始。有没有办法在分页网格的第二页中继续行索引值？ - Aman Verma

@AmanVerma 不确定你的分页设置是如何以及它如何干扰“rowIndex”的。我在分页网格方面没有经验，无法帮助你。 - kscherrer

没问题，谢谢你的回复。然而，我正在使用这个分页表格：https://vaadin.com/directory/component/grid-pagination/overview - Aman Verma