Добавить строку подзаголовка/итоговую строку в сетке Vaadin

Question

Можно ли добавить строку суммирования в сетку Vaadin?

В настоящее время у меня есть сетка, которая имеет строку заголовка для объединения столбцов и дает хороший обзор наверху. Однако я хотел бы добавить похожие заголовки по всей сетке, чтобы отметить конец раздела. Похоже, что можно добавить заголовки в секции заголовка, которые просто заполнят голову сетки. Нижние колонтитулы делают то же самое внизу.

Но что, если я хочу создать специальную строку внутри сетки, не создавая новый компонент сетки? Один из них будет видимым разделителем данных.

Answer 1

В зависимости от того, что вам нужно и насколько сложно ваше приложение, вы можете fake что-то с некоторыми (возможно, незначительными) усилиями. Ниже вы можете найти простой пример, который должен вас начать.

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) Результат