在Vaadin Grid中添加子標題行/彙總行

Question

是否可以將彙總行添加到Vaadin Grid中？

我目前有一個網格，有一個標題行來加入列，並在頂部給出一個很好的概述。不過，我想在整個網格中添加類似的標題以標記節的結尾。它似乎只能在標題部分添加標題，這將簡單地填滿網格的頭部。頁腳底部也是這樣。

但是，如果我想在網格內的特殊行而不必創建新的網格組件？一個將是一個可見的數據分隔符。

Answer 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()); 
    } 
} 

5）主題樣式

@mixin mytheme { 
    @include valo; 
    // Insert your own theme rules here 

    .v-grid-row > td.total-row { 
    background-color: #c4e7b7; 
    font-weight: bold; 
    } 
} 

6）結果