如何在单个表格单元格中显示多个 Vaadin 属性？

【问题标题】：How display several Vaadin properties in a single table cell?如何在单个表格单元格中显示多个 Vaadin 属性？
【发布时间】：2015-04-30 10:40:03
【问题描述】：

我需要显示一个 java 类的 3 个属性在表格单元格中彼此下方。

这 3 个属性被添加到绑定到表的容器中 - 但是，这会导致每个属性占用不同的单元格同一行。

e.g.
Container container = new IndexedContainer();
container.addContainerProperty("property1", String.class, "dftvalue1");
container.addContainerProperty("property2", String.class, "dftvalue2");
container.addContainerProperty("property3", String.class, "dftvalue3");

container.getContainerProperty(itemId, "property1").setValue("value1");
...
Table table = new Table("My Table");
table.setContainerDataSource(container);

我需要显示如下。

          |  property1   |
col1      |  property2   |
          |  property3   |

请您告知/建议如何做到这一点？谢谢史蒂夫。

【问题讨论】：

标签： vaadin vaadin7

【解决方案1】：

您将为此实现Table.ColumnGenerator。然后创建那里的单元格的内容。内容可以是“任何”vaadin Component。

要么使用例如Label 带有 HTML 内容和用<br/> 连接你的道具（注意XSS！）。或者你也可以创建一个垂直布局并为每个属性添加标签。

类似这样的：

def c = new BeanItemContainer<SomeBean>(SomeBean)
c.addAll([
        new SomeBean(prop1: "prop11", prop2: "prop12", prop3: "prop13"),
        new SomeBean(prop1: "prop21", prop2: "prop22", prop3: "prop23"),
        new SomeBean(prop1: "prop31", prop2: "prop32", prop3: "prop33"),
])
setContent(new Table().with{
    setContainerDataSource(c, [])
    addGeneratedColumn("combined", {Table source, Object itemId, Object columnId ->
        (source.getItem(itemId) as BeanItem<SomeBean>).bean.with{
            // UNSAFE CODE! DON'T USE VERBATIM
            new Label("$it.prop1<br />$it.prop2<br />$it.prop3", ContentMode.HTML)
        }
    })
    setVisibleColumns(["combined"].toArray())
    it
})

【讨论】：