#formatting #vaadin #cell #vaadin-grid
Вопрос:
Я много искал, но каждое решение заключалось в том, чтобы включить на страницу некоторые постоянные имена классов CSS и использовать ClassNameGenerator столбца для установки правильного classname в ячейке / строке.
Теперь это может быть хорошим решением, когда разработчик может принять решение о форматировании ячейки, однако, когда пользователь может решить (особенно с помощью скрипта, написанного как средство визуализации ячеек), как будет выглядеть ячейка, невозможно использовать ClassNameGenerator .
Итак, вопрос в том, как я могу отформатировать фон ячейки / строки программно, не используя какой-либо CSS? Я могу предоставить пользовательский компонент в качестве значения ячейки. Таким образом, можно отобразить метку с помощью значка, или просто значка, или флажка, однако раскрашивания этого отображаемого компонента недостаточно, поскольку он меньше самой ячейки, что делает его действительно уродливым. Мне нужно получить доступ к корневому элементу ячейки и раскрасить его с помощью getStyle().set(«background», «xxxx»). Как этого добиться?
Спасибо!
Ответ №1:
Вы можете использовать TemplateRenderer.
Например:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Ознакомьтесь с этим руководством для получения дополнительной информации: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
Комментарии:
1. Да, я уже использую это для отображения изображения, изображения текста, флажка (для столбцов bool) и т. Д. Но из этого вы не можете установить фон ячейки. Все, что вы можете сделать, это отформатировать текст и предоставить пользовательский компонент (например, Div с любым содержимым внутри). Однако, если вы установите фон этого компонента, то то, что вы отображаете в TemplateRenderer, будет окрашивать не всю ячейку, а только сам компонент. По сути, я хочу раскрасить фон ячейки (или фон строки) на основе разных критериев, что доступно только во время выполнения, когда ячейки отображаются. Это не может быть предопределено.
2. Это невозможно. Единственное, что вы можете сделать, это установить для заполнения ячейки значение 0, а затем оформить содержимое
3. спасибо за идею, да, мне пришлось использовать CSS для массового «деукрашивания» ячеек сетки, поэтому мой DIV, отображаемый в ячейке, на 100% поместится в ячейку сетки, теперь я могу раскрашивать строки и отображать в ячейках все, что захочу. Поэтому, если кто-то хочет добиться этого, необходимо удалить все отступы / поля / оформление из ячеек сетки и отобразить пользовательский компонент, подобный Div, и установить отступы / поля / оформление в div, а также затем можно установить цвет фона. Тогда у вас есть только беспорядок с подсветкой выделения строки … 🙂
4. Да, это действительно будет проблемой 🙂
5. Ну, если щелчок / выбор обрабатывается на стороне клиента, это портит фон отображаемых ячеек. Если щелкнуть строку, она будет выделена, но если щелкнуть по другой строке, ранее выбранной строке будет возвращен цвет по умолчанию (например, белый). Я решил добавить в сетку ClickListener и явно выбрать выбранную строку на стороне сервера, это запускает «повторный рендеринг» строк, и поэтому раскраска остается идеальной. Это своего рода взлом, а также не лучшее решение, но я мог бы придумать это. Теперь у меня проблемы с переключением treegird (поскольку я использую treegrid, а не grid).
Ответ №2:
Хорошо, наконец-то я решил. Я использую средство визуализации шаблонов с правильной структурой шаблона. Я изменил стиль ячейки таким образом, чтобы мой рендерер DIV заполнял всю ячейку (удалил все отступы / поля из исходных ячеек)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
Я также добавил несколько простых объявлений CSS в один из основных CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
Таким образом, отображаемый DIV заполняет всю ячейку, и я могу раскрасить его фон.
Теперь проблема связана с выделением, поскольку выделение больше не отображается. Для этого вы найдете переменную —cellopa, обычно равную 255, и равную 0 для выбранных ячеек.
Теперь, когда я определяю цвет фона в div, я использую rgba и устанавливаю альфа-значение переменной var(—cellopa), например, rgba(255, 0, 0, var(—cellopa))
Теперь, когда строка не выбрана, значение cellopa равно 255, поэтому фон виден, когда я выбираю строку, значение cellopa устанавливается равным 0, поэтому фон DIV становится прозрачным, а цвет выделения строки в строке виден. Это очень быстро, и изменение выделения не вызывает никаких сбоев, а также предыдущее состояние раскраски восстанавливается должным образом.
Мне также удалось разобраться с treegrid и удалось полностью раскрасить даже столбец иерархии, используя специальный шаблон для столбца иерархии с некоторым дополнением с учетом уровня.