Hinzufügen einer Unterkopfzeile/Zusammenfassungszeile in Vaadin Grid

Question

Kann eine zusammenfassende Zeile in ein Vaadin Grid eingefügt werden?

Ich habe derzeit ein Raster, das eine Kopfzeile hat, um Spalten zu verbinden und einen guten Überblick an der Spitze geben. Ich möchte jedoch ähnliche Header im gesamten Raster hinzufügen, um das Ende eines Abschnitts zu markieren. Es scheint nur möglich zu sein, Kopfzeilen in der Kopfzeile hinzuzufügen, die einfach den Kopf des Rasters füllen. Fußzeilen machen das gleiche am unteren Rand.

Aber was, wenn ich eine spezielle Zeile innerhalb des Rasters haben möchte, ohne eine neue Rasterkomponente erstellen zu müssen? Eines, das ein sichtbarer Datenseparator wäre.

Answer 1

Je nachdem, was Sie brauchen und wie kompliziert Ihre App ist, können Sie fake etwas mit (möglicherweise geringen) Aufwand. Unten finden Sie ein einfaches Beispiel, das Ihnen den Einstieg erleichtern soll.

1) Allgemeine Klasse mit BeanItemContainer verwenden beide Kategorien von Zeilen

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) Regular Produktreihe

public class ProductRow extends Row { 
    public ProductRow(String name, int amount) { 
     super(name, amount); 
    } 

    @Override 
    public String getRowType() { 
     return "product-row"; 
    } 
} 

3) Sonder Zeile angezeigt werden, die insgesamt angezeigt werden für die vorherige Charge von Produkten

public class TotalRow extends Row { 
    public TotalRow(int sum) { 
     super("Total", sum); 
    } 

    @Override 
    public String getRowType() { 
     return "total-row"; 
    } 
} 

4) Das Gitter selbst

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) Themen Arten

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

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

6) Ergebnis