Vaadin 网格行索引

Question

在 vaadin table 如果我们这样做

table.setRowHeaderMode(RowHeaderMode.INDEX);

我们得到一个带有行索引的列。

是否可以使用 vaadin 网格？

Answer 1

到目前为止我还没有看到这样的选项，但你应该可以用 a generated column 伪造它。请参阅下面的 naive 实现，它应该可以帮助您入门（非常欢迎改进和建议）：

// our grid with a bean item container
Grid grid = new Grid();
BeanItemContainer<Person> container = new BeanItemContainer<>(Person.class);

// wrap the bean item container so we can generated a fake header column
GeneratedPropertyContainer wrappingContainer = new GeneratedPropertyContainer(container);
wrappingContainer.addGeneratedProperty("rowHeader", new PropertyValueGenerator<Long>() {
    private long index = 0;

    @Override
    public Long getValue(Item item, Object itemId, Object propertyId) {
        return index++;
    }

    @Override
    public Class<Long> getType() {
        return Long.class;
    }
});

// assign the data source to the grid and set desired column order
grid.setContainerDataSource(wrappingContainer);
grid.setColumnOrder("rowHeader", "name", "surname");

// tweak it a bit - definitely needs more tweaking
grid.getColumn("rowHeader").setHeaderCaption("").setHidable(false).setEditable(false).setResizable(false).setWidth(30);

// freeze the fake header column to prevent it from scrolling horizontally
grid.setFrozenColumnCount(1);

// add dummy data
layout.addComponent(grid);
for (int i = 0; i < 20 ; i++) {
    container.addBean(new Person("person " + i, "surname " + i));
}

这将生成类似于下图的内容：

Answer 2

好吧，我花了不止一段时间才弄明白。我不知道你为什么需要这个，但如果你的目的是找到哪个网格行被 clicked，那么你可以从 datasource[=23] 中获取索引=] 通过监听器的 itemClick 事件控制你的控件。

在我的例子中，我的数据源是 SQLContainer，我已经可以使用它（参见 ds var）所以我这样做了：

grid.addListener(new ItemClickEvent.ItemClickListener() { @Override public void itemClick(ItemClickEvent event) { Object itemId = event.getItemId(); int indexOfRow = ds.indexOfId(itemId); } });

您通常在初始化控件时通过构造函数或设置属性向控件添加数据源。如果你从某个地方获得了一个已经附加数据源的网格，你总是可以通过这样的方式获得它：

SQLContainer ds = (SQLContainer)gred.getContainerDataSource();

Answer 3

现在有一个网格渲染器可用于执行此操作。它位于网格渲染器插件 https://vaadin.com/directory/component/grid-renderers-collection-for-vaadin7 中。它也与 Vaadin 8 兼容。

这是它的使用方法（有几个不同的选项可用于呈现索引）。 grid.addColumn(value -> "", new RowIndexRenderer()).setCaption("Row index");

Answer 4

我用这个技巧：

int i = 0;    
grid.addComponentColumn(object -> {
                i++;
                return new Label("" + i);
            }).setCaption("");

Answer 5

值得一提的是，我将以下内容与 Vaadin 18 flow 一起使用并且效果很好。

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

Vaadin 网格行索引

Vaadin Grid Row Index

vaadin

vaadin-grid