带有行索引的 Vaadin 流网格

Question

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

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

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-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

带有行索引的 Vaadin 流网格

Vaadin Flow Grid with Row-Index

vaadin

vaadin-grid

vaadin-flow

vaadin14