如何在 Vaadin 的网格中添加按钮

Question

您好，我正在尝试在Vaadin中的网格中添加按钮，但它只打印按钮对象的引用。

Grid statementEnquiriesList = new Grid();
statementEnquiriesList.addColumn("", Button.class);
        statementEnquiriesList.addColumn("DATE/TIME", String.class);
        statementEnquiriesList.addColumn("TRANSACTION ID", String.class);
        statementEnquiriesList.addColumn("FROM", String.class);

// historyList is an array object
for (int i = 0; i < historyList.size(); i++)
{
    HistoryList recordObj = historyList.get(i);
    Button addBtn = new Button();
    addBtn.setCaption("Add");
    statementEnquiriesList.addRow(addBtn , recordObj.getDate(), recordObj.getTransactionId(), recordObj.getFrom());
}

我该如何在这张图片上添加“添加”字样。

- herman shafiq

---

你有查看过 ButtonRenderer 和 book example 吗？ - Morfic

@Morfic 我认为你的评论就是答案。另一个链接：https://vaadin.com/docs/-/part/framework/components/components-grid.html（请参见ButtonRenderer段落）。 - Steffen Harbich

感谢 @Morfic。问题已解决 :)，通过跟随示例实现。 - herman shafiq

酷，你可以发布自己的实现作为回答，并将其选择为此问题的正确答案（根据您的声誉，您可能需要等待几天）。这是让其他人快速找到类似问题答案的首选 SO 方式。@SteffenHarbich确实如此，但它旨在为作者提供灵感，让他了解他可以在哪里找到更多Vaadin细节、示例等，以便在未来的工作中选择自己的解决方案。干杯，伙计们 :-) - Morfic

Answer 1

Vaadin 8.1 - 网格中的组件

Vaadin 8.1现在内置了ComponentRenderer，用于在网格中显示按钮或其他组件，包括您自己的自定义组件。

请参见新功能页面上的第一项"网格中的组件"。

示例：将标签添加到网格中。

grid.addColumn(
    person -> new Label( person.getFullName() ) ,
    new ComponentRenderer()
).setCaption( "Full Name" ) 

- Basil Bourque

Answer 2

你不能直接在Vaadin 7中在网格中使用组件。您必须使用ButtonRenderer来呈现按钮。

RendererClickListener ownerClickListener = new RendererClickListener() {

    private static final long serialVersionUID = 1L;

    @Override
    public void click(RendererClickEvent event) {
        //Someone clicked button
    }
};
ButtonRenderer ownerRenderer = new ButtonRenderer(ownerClickListener, "");
grid.getColumn("ownerName").setRenderer(ownerRenderer);

但是在Vaadin 8中，您可以使用组件，请参见Vaadin 8中的网格组件.

我正在使用Vaadin 7，但ButtonRenderer对我来说并不理想，因为没有办法向按钮添加FontIcon，也无法将其作为HTML插入。 相反，我使用了组件渲染器插件。这是我如何使用它的：

Grid grid = new Grid();
BeanItemContainer<EventChange> dataSource = //... primary data source
GeneratedPropertyContainer dataSource2 = new GeneratedPropertyContainer(dataSource);
grid.setContainerDataSource(dataSource2);
dataSource2.addGeneratedProperty("ownerWithButton", new PropertyValueGenerator<Component>() {

        private static final long serialVersionUID = 1L;

        @Override
        public Component getValue(Item item, Object itemId, Object propertyId) {
            ClickListener ownerClickListener = new ClickListener() {

                private static final long serialVersionUID = 1L;
                @Override
                public void buttonClick(ClickEvent event) {
                    // do something, user clicked button for itemId
                }
            };
            Button button = new Button(FontAwesome.USER);
            button.addClickListener(ownerClickListener);
            return button;
        }

        @Override
        public Class<Component> getType() {
            return Component.class;
        }
    });
grid.setColumns("ownerWithButton", /*and rest of your columns*/);
grid.getColumn("ownerWithButton").setRenderer( new ComponentRenderer());

- Piro

---

我试图在带有IndexedContainer的v7网格中使用此插件，但我无法成功。我尝试跟随这个例子（或演示源代码中的ClassicGridTab.java）- 它使用BeanItemContainer，我怀疑我的错误是由于它导致的。我还尝试了NotABeanGridWithDecoratorTab.java演示，但它使用了GeneratedPropertyContainer。现在我非常迷茫。有没有任何提示可以让我解决这个问题？ - Pere

@Pere，您需要使用GeneratedPropertyContainer来创建返回组件以显示的属性，并且您需要另一个容器来保存您的主要数据。Grid必须使用GeneratedPropertyContainer数据源，以便它可以查看原始数据和生成的数据。我在我的示例中没有看到将数据源设置为网格，所以这是您的问题吗？我会尽快编辑我的答案。也许尝试创建新问题。 - Piro

感谢您的帮助，@Piro。实际上不需要编辑您的答案；您的评论已经澄清了一切。我会尝试您的提示 ;) - Pere