在 vaadin 网格中单击鼠标标记选中的行 (SelectionMode.MULTI)

Question

我有一个带有多个 select 选项的网格。在正常情况下，当我单击复选框时，该行被 selected 使用默认的 selected 颜色。但是当我在网格行中单击时，我需要具有相同或其他 selected 颜色。

我创建了一个 CSS:

:host(#grdPeriodicos) td.selected{
    background-color: #BDBDBD;
    color: #242140;
    font-weight: bold;
}

在我的 class 视图中导入它：

@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")
public class PeriodicoListaView extends VerticalLayout implements Serializable {
...

grdPeriodicos.setId("grdPeriodicos");
grdPeriodicos.addColumn(periodico -> periodico.getId_Nota()).setHeader("Nota");
grdPeriodicos.addColumn(periodico -> periodico.getId_NotaItem()).setHeader("Nota item"); 
grdPeriodicos.setSelectionMode(SelectionMode.MULTI);

grdPeriodicos.setClassNameGenerator( p -> {
            return ((periodicoDTO != null) && (periodicoDTO.getId_NotaItem().equals(p.getId_NotaItem()))) ? "selected" : null; 
});


grdPeriodicos.addItemClickListener(e -> {

            if(e.getItem() != null) {
                carregaEPreencheDetalhesPeriodico(e.getItem());             
            }
        });

上面的代码在加载网格时有效，但在单击该行时没有任何反应。我可以在 addItemClickListener 中放入什么以再次触发 setClassNameGenerator？

或者我怎样才能在单击该行时显示 select 行？

Answer 1

在多selection 模式下，单击复选框时selected 项目，但单击行中的任意位置时则不会。如果你想 select 响应行点击的项目，你可以这样做：

grdPeriodicos.addItemClickListener(e -> {
  grid.asMultiSelect().select(e.getItem());
});

或者，如果您想在不 select 项目的情况下更新行样式，您需要调用 refreshItem（这将导致为该行再次评估 ClassNameGenerator）

grdPeriodicos.addItemClickListener(e -> {
  if(e.getItem() != null) {
    carregaEPreencheDetalhesPeriodico(e.getItem());             
    grid.getDataProvider().refreshItem(e.getItem());
  }
});

在 Vaadin's Cookbook 中有使用类似方法的现场演示。

在 vaadin 网格中单击鼠标标记选中的行 (SelectionMode.MULTI)

Mark row selected on mouse click in vaadin grid(SelectionMode.MULTI)

java

vaadin