在2.x中,如何根据数据行中的某个值,对该行进行高亮显示?
例如:查询年龄等于15岁的学生,对这些学生进行高亮显示。
classNames
<dataGrid id="studentsDataGrid"
width="100%"
minHeight="20em"
dataContainer="studentsDc"
columnReorderingAllowed="true" classNames="styling">
@Install(to = "studentsDataGrid", subject = "partNameGenerator")
private String studentsDataGridPartNameGenerator(final Student student) {
return student.getAge()>15?"highlight":null;
}
styling
(DataGrid
的 classNames
)和highlight
(partName
):vaadin-grid.styling::part(highlight) {
background-color: var(--lumo-success-color-10pct);
}
另外,这个样式可以让鼠标悬停的那行高亮:
vaadin-grid::part(row):hover {
--row-bg: var(--lumo-primary-color-10pct);
}
vaadin-grid::part(cell) {
background: var(--row-bg);
}