Table 合并单元格 - Vaadin

Question

我正在使用 Vaadin 创建 table。一些细胞在重复。所以我希望它们合并在一个单元格中，如图所示：

第一张图片显示 table 现在的样子，第二张是我想要的合并单元格的样子。

我正在使用此代码：

Table table = new Table(AppData.getMessage("menu.report2"));
table.addContainerProperty(tableHeaders[0], String.class, null);
table.addContainerProperty(tableHeaders[1], String.class, null);
table.addContainerProperty(tableHeaders[2], String.class, null);
table.addContainerProperty(tableHeaders[3], String.class, null);

List<User> employeeList = employeeDAO.findAllEmployees();
int i;
for (i = 0; i < employeeList.size(); i++) {
    User employee = employeeList.get(i);
    table.addItem(new Object[]{
            CaseStatus.OPEN,
            tasksDAO.countTasks(CaseStatus.OPEN),
            employee.getFirstAndLastName(),
            tasksDAO.countTasks(employee, CaseStatus.OPEN)},
            i);
}

for (int j = 0; j < employeeList.size(); j++) {
    User employee = employeeList.get(j);
    table.addItem(new Object[]{
            CaseStatus.CLOSED,
            tasksDAO.countTasks(CaseStatus.CLOSED),
            employee.getFirstAndLastName(),
            tasksDAO.countTasks(employee, CaseStatus.CLOSED)},
            i + j);
}


table.setPageLength(table.size());

addComponent(table);
setComponentAlignment(table, Alignment.TOP_CENTER);
setMargin(true);

Answer 1

我认为，这在 "normal way" 中是不可能的。但是我知道如何模拟这个。

第一个解法：

您可以简单地使用 GridLayout 来构建您想要的网格。那么除了这种网格的大小之外，没有什么会限制您的想象力。它不应该太大（也指出here）。

第二种解法：

另一个建议有点疯狂。

禁用 Table/Grid 条纹。
在一组相似的单元格中，只需填写第一行。其余部分留空（或字符串中的 space）。

然后处理重复数据（来自第一列和第二列），但不能垂直对齐它们（文本将保留在顶部 - 组的第一行）。

第三种解法：

检查Add-ons list. For example ItemGrid。

Table 合并单元格 - Vaadin

Table merge cells - Vaadin

vaadin