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

Можно ли добавить итоговую строку в сетку Ваадина?

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

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


person LML    schedule 28.07.2016    source источник


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

Пользовательские строки промежуточного итога

person Morfic    schedule 28.07.2016
comment
Спасибо за подробный ответ. Так что, по сути, мой единственный выбор - добавить дополнительную строку с необходимой информацией + CSS-стиль в качестве специальной строки? Я действительно надеялся, что смогу также выполнить соединение столбцов, как вы можете делать в заголовках. Я бы предпочел это делать несколько сеток друг под другом - person LML; 28.07.2016
comment
Из того, что я читал, вы также не можете выполнять colspan в сетке? Хотя мне понравилась сетка за ее простую настройку редактирования, манипуляции с отображением, похоже, сильно ограничены. Таблица в основном устарела с момента появления Grid или допускает лучшие варианты для этого? - person LML; 28.07.2016
comment
@LML Насколько мне известно, Spanning поддерживается только в верхних и нижних колонтитулах. Вы правы, таблица устарела, так как сетка, но я не думаю, что это предлагает лучшие варианты для этого, это будет почти то же самое. - person Morfic; 28.07.2016
comment
это очень неудачно для моего варианта использования. Я посмотрю, как работает стиль, для наглядности при отображении сгруппированных сегментов. Спасибо за ваш отзыв - person LML; 28.07.2016
comment
@LML Если вы еще не знакомы с ними, вы можете начать с просмотра Документы Vaadin, чтобы понять, как создаются темы и как они работают. Удачи - person Morfic; 28.07.2016