Vaadin 表 |如何设置colspan答案

【问题标题】：Vaadin table | How to set colspanVaadin 表 |如何设置colspan
【发布时间】：2025-12-11 04:55:02
【问题描述】：

我正在使用vaadin tree table，并且我想为满足某些业务条件的某些行设置第一列 colspan（等于表中列的总数）。对于其余的表格行，各个列将正常显示。
我尝试过使用生成的列，并通过设置明确的列宽，以及使用复合列；但这样做会改变所有行/列的布局。请建议我们将如何实现这一目标。
谢谢！

【问题讨论】：

标签： vaadin vaadin7 vaadin-grid

【解决方案1】：

您可以通过调用TreeTable#setColumnExpandRatio(String columnName, float value) 来设置列的宽度。

在下面的示例中，我将“名称”列的宽度设置为 75%。如果您不指定任何其他内容，则其余列将适合其余空间。

ttable.setColumnExpandRatio("Name", 0.75f);
ttable.setColumnExpandRatio("Number", 0.25f); //not necessary

试试下面我从 Vaadin 书中修改的示例：

@Theme("mytheme")
public class MyUI extends UI {

@Override
protected void init(VaadinRequest vaadinRequest) {
    final VerticalLayout layout = new VerticalLayout();
    layout.setSizeFull();
    TreeTable ttable = new TreeTable();

    ttable.addContainerProperty("Name", String.class, null);
    ttable.addContainerProperty("Number", Integer.class, null);

    //Add some sample data
    ttable.addItem(new Object[]{"Menu", null}, 0);
    ttable.addItem(new Object[]{"Beverages", null}, 1);
    ttable.setParent(1, 0);
    ttable.addItem(new Object[]{"Foods", null}, 2);
    ttable.setParent(2, 0);
    ttable.addItem(new Object[]{"Coffee", 23}, 3);
    ttable.addItem(new Object[]{"Tea", 42}, 4);
    ttable.setParent(3, 1);
    ttable.setParent(4, 1);
    ttable.addItem(new Object[]{"Bread", 13}, 5);
    ttable.addItem(new Object[]{"Cake", 11}, 6);
    ttable.setParent(5, 2);
    ttable.setParent(6, 2);

    ttable.setColumnExpandRatio("Name", 0.75f);
    ttable.setColumnExpandRatio("Number", 0.25f);
    ttable.setSizeFull();
    layout.addComponents(ttable);
    layout.setMargin(true);
    layout.setSpacing(true);

    setContent(layout);
}

@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}

【讨论】：

TreeTable#setColumnExpandRatio(String columnName, float value) 将更新所有行的列宽。我的要求是为某些行（不是所有行）扩展某些单元格的宽度。谢谢。
TBH，我认为这是不可能实现的。列的宽度是“全局的”，因此您不能为特定行设置它。我见过的所有表格的列都是“对齐的”。你可以尝试什么树网格插件。它扩展了网格，它可能允许更好地调整它或创建一个分组列。否则我认为你可能会重新考虑你的用户界面。如果您有图表或方案，那肯定会有所帮助。

【解决方案2】：

你可以使用com.vaadin.ui.Table.setRowGenerator:

Java 8 + Vaadin 7.6.1 示例

setRowGenerator((Table table, Object itemId) -> {
    if (itemId instanceof MyClassThatIdentifiesARowToMerge) {
        Table.GeneratedRow generatedRow = new Table.GeneratedRow("text-of-merged-cell");
        generatedRow.setSpanColumns(true);
        return generatedRow; // merge
    }
    return null; // doesn't merge
} );

【讨论】：