Vaadinグリッドにサブヘッダー行/要約行を追加する

Question

Vaadinグリッドに要約行を追加することはできますか？

現在、列を結合するヘッダー行を持つグリッドがあり、上部に概要が表示されます。しかし、セクションの終わりをマークするために、グリッド全体に同様のヘッダーを追加したいと思います。ヘッダーセクションにヘッダーを追加するだけで、グリッドの先頭を埋めることは可能です。フッターは同じになります。

しかし、新しいグリッドコンポーネントを作成せずにグリッド内に特別な行を追加する場合はどうすればよいですか？ 1つは目に見えるデータセパレータです。

Answer 1

必要なものとアプリケーションの複雑さに応じて、fake何か（おそらくマイナーな）努力が必要なものがあります。下記の簡単な例を見てください。

1）一般的なクラスは

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）特別行はの合計を表示する行の両方のカテゴリを表示するBeanItemContainerで使用します前の製品群

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）詳細な回答のため