在Vaadin网格中添加子标题行/汇总行
是否可以将汇总行添加到Vaadin网格中 我目前有一个网格,它有一个标题行来连接列,并在顶部提供了一个良好的概述。但是,我想在整个网格中添加类似的标题,以便标记一节的结束。似乎只能在header部分添加header,这将简单地填充网格的头部。页脚在底部也会这样做在Vaadin网格中添加子标题行/汇总行,vaadin,vaadin7,vaadin-grid,Vaadin,Vaadin7,Vaadin Grid,是否可以将汇总行添加到Vaadin网格中 我目前有一个网格,它有一个标题行来连接列,并在顶部提供了一个良好的概述。但是,我想在整个网格中添加类似的标题,以便标记一节的结束。似乎只能在header部分添加header,这将简单地填充网格的头部。页脚在底部也会这样做 但是,如果我希望在网格中有一个特殊的行,而不必创建新的网格组件,该怎么办?一个是可见的数据分隔符。根据您的需要和应用程序的复杂程度,您可以通过一些(可能很小的)努力来伪造一些东西。你可以在下面找到一个简单的例子,它会让你开始学习 1)
但是,如果我希望在网格中有一个特殊的行,而不必创建新的网格组件,该怎么办?一个是可见的数据分隔符。根据您的需要和应用程序的复杂程度,您可以通过一些(可能很小的)努力来伪造一些东西。你可以在下面找到一个简单的例子,它会让你开始学习 1) 与
BeanItemContainer
一起使用的公共类,用于显示两类行
public abstract class Row {
private String name;
private int amount;
public Row(String name, int amount) {
this.name = name;
this.amount = amount;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getAmount() {
return amount;
}
public void setAmount(int amount) {
this.amount = amount;
}
// provide a custom style/type for the current row
public abstract String getRowType();
}
2) 常规产品行
public class ProductRow extends Row {
public ProductRow(String name, int amount) {
super(name, amount);
}
@Override
public String getRowType() {
return "product-row";
}
}
3) 显示上一批产品总数的特殊行
public class TotalRow extends Row {
public TotalRow(int sum) {
super("Total", sum);
}
@Override
public String getRowType() {
return "total-row";
}
}
4) 网格本身
public class GridWithIntermediateRowsComponent extends VerticalLayout {
private static final String[] AVAILABLE_PRODUCTS = new String[]{"Banana", "Apple", "Coconut", "Pineapple", "Melon"};
private Random random = new Random();
public GridWithIntermediateRowsComponent() {
BeanItemContainer<Row> container = new BeanItemContainer<>(Row.class);
Grid grid = new Grid(container);
// show only the relevant columns, the style one is used only to change the background
grid.setColumns("name", "amount");
// set a style generator so we can draw the "total" rows differently
grid.setCellStyleGenerator(row -> ((Row) row.getItemId()).getRowType());
// create some dummy data to display
for (int i = 0; i < random.nextInt(10) + 1; i++) {
container.addAll(createItemBatch(random.nextInt(5) + 1));
}
addComponent(grid);
}
private List<Row> createItemBatch(int total) {
List<Row> rows = new ArrayList<>(total + 1);
// add a batch of products
String product = AVAILABLE_PRODUCTS[random.nextInt(AVAILABLE_PRODUCTS.length)];
for (int i = 0; i < total; i++) {
rows.add(new ProductRow(product, random.nextInt(100) + 1));
}
// calculate and add a "total row"
rows.add(calculateTotal(rows));
return rows;
}
private Row calculateTotal(List<Row> rows) {
return new TotalRow(rows.stream().mapToInt(Row::getAmount).sum());
}
}
6) 结果
谢谢您的详细回答。所以基本上我唯一的选择就是添加一个额外的行,其中包含所需的信息+CSS样式,作为一个特殊行?我真的希望能够像在标题中一样进行列连接。我更喜欢在一个网格下做多个网格,从我读到的,你也不能在一个网格内做colspan?虽然我喜欢网格的简单编辑设置,但显示操作似乎受到很大限制。这个表基本上是因为网格而被弃用的,还是因为它允许更好的选择呢?@LML,据我所知,目前是这样。你是对的,但我不认为它提供了更好的选择,它几乎是一样的。这对于我的用例来说是非常不幸的。为了清晰起见,在显示分组段时,我将看到样式是如何工作的。谢谢你的帮助feedback@LML如果你还不熟悉它们,你可以先看一下。祝你好运