Как покрасить строку или ячейку сетки в зависимости от ее данных в Vaadin 14 - PullRequest
Новая
       8

Как покрасить строку или ячейку сетки в зависимости от ее данных в Vaadin 14

2 голосов
/ 29 февраля 2020

Предположим, у меня есть Grid<Person> и некоторые person.getStatus(), которые возвращают Enum 

enum Status {
SINGLE, MARRIED, DIVORCED
}

Я бы хотел покрасить столбец сетки в соответствии со значением этого перечисления.

Как это можно сделать?

1 Ответ

7 голосов
/ 29 февраля 2020

В Vaadin 14

Стиль строки сетки на основе данных

Сначала вам необходимо установить генератор строк CSS для этой строки. Это добавит имя класса CSS к элементам td, созданным Grid. Функция генератора получает ваш элемент, и вы должны вернуть CSS имя класса в виде String или null, если вы не хотите добавлять имя класса для определенных строк. Несколько имен классов могут быть возвращены из генератора как разделенные пробелами. 

grid.setClassNameGenerator(person -> {
    if (person.getStatus() == Status.DIVORCED || person.getStatus() == Status.SINGLE) {
        return "my-style-1";
    } else {
        return "my-style-2";
    }
});

Чтобы изменить стиль на основе имен классов CSS, необходимо создать тему для Grid.

В папке frontend/styles добавьте styles.css. 

td.my-style-1 {
    background-color: black;
    color: hotpink;
}

td.my-style-2 {
    background-color: hotpink;
    color: black;
}

и включите стиль в свое приложение. 

@Route
@CssImport(value = "./styles/styles.css", themeFor = "vaadin-grid")
public class MainView extends VerticalLayout {
// your code for grid
}

Стиль ячейки сетки на основе данных

Импорт и создание стиля CSS выполняется так же, как и для стилизации строки, но используемый Grid API отличается.

Для ячейки следует использовать генератор имен классов столбцов: 

grid.getColumnByKey("status").setClassNameGenerator(person -> {
    if (person.getStatus() == Status.SINGLE) {
        return "my-style-3";
    }
    return null;
});
...