Vaadin网格行索引

Question

在vaadin表中，如果我们这样做

table.setRowHeaderMode(RowHeaderMode.INDEX);

我们得到一个包含行索引的列。

是否可以使用vaadin网格进行相同的操作？

Answer 1

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

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

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

以下是如何使用它（如何渲染索引有几个不同的选项）。 grid.addColumn(value -> "", new RowIndexRenderer()).setCaption("Row index");

Answer 3

好的，我花了一段时间来弄明白这一点。我不知道你为什么需要这个，但如果你的目的是找到哪个网格行点击，那么你可以通过控件的数据源获取索引听众的itemClick事件。

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

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

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

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

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("#");