Vaadin表|如何设置colspan

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

---

谢谢

您可以通过调用

TreeTable#setColumnExpandRatio（字符串columnName，浮点值）

来设置列的宽度

在下面的示例中，我将“Name”列的宽度设置为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（字符串columnName，浮点值）

来设置列的宽度

在下面的示例中，我将“Name”列的宽度设置为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 {
}
}

---

您可以使用

com.vaadin.ui.Table.setRowGenerator

：

Java8+Vaadin7.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
} );

---

您可以使用

com.vaadin.ui.Table.setRowGenerator

：

Java8+Vaadin7.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
} );

---

TreeTable#setColumnExpandRatio（字符串columnName，浮点值）

将更新所有行的列宽。我的要求是为某些行（不是所有行）的某些单元格扩展宽度。谢谢。TBH，我认为这是不可能实现的。列的宽度为“全局”，因此无法为特定行设置。我看到的所有表格的列都是“对齐”的。你可以试试树形网格插件。它扩展了网格，可以更好地调整网格或创建分组列。否则，我认为您可能会重新考虑您的UI。如果您有一个图表或方案，它肯定会有所帮助。

TreeTable#setColumnExpandRatio（String columnName，float value）

将更新所有行的列宽。我的要求是为某些行（不是所有行）的某些单元格扩展宽度。谢谢。TBH，我认为这是不可能实现的。列的宽度为“全局”，因此无法为特定行设置。我看到的所有表格的列都是“对齐”的。你可以试试树形网格插件。它扩展了网格，可以更好地调整网格或创建分组列。否则，我认为您可能会重新考虑您的UI。如果你有一个图表或方案，肯定会有帮助。