在2.x中,如何根据数据行中的某个值,对该行进行高亮显示?

在2.x中,如何根据数据行中的某个值,对该行进行高亮显示?

例如:查询年龄等于15岁的学生,对这些学生进行高亮显示。

  1. 首先,为了区分其他的grid,可以给需要显示高亮的grid加一个 classNames
<dataGrid id="studentsDataGrid"
          width="100%"
          minHeight="20em"
          dataContainer="studentsDc"
          columnReorderingAllowed="true" classNames="styling">
  1. 然后,生成高亮的partName:
@Install(to = "studentsDataGrid", subject = "partNameGenerator")
private String studentsDataGridPartNameGenerator(final Student student) {
    return student.getAge()>15?"highlight":null;
}
  1. 样式,注意其中的stylingDataGridclassNames)和highlightpartName):
vaadin-grid.styling::part(highlight) {
    background-color: var(--lumo-success-color-10pct);
}

参考:Grid | Components | Vaadin Docs

另外,这个样式可以让鼠标悬停的那行高亮:

vaadin-grid::part(row):hover {
    --row-bg: var(--lumo-primary-color-10pct);
}

vaadin-grid::part(cell) {
    background: var(--row-bg);
}