在 vaadin 网格中标记鼠标点击选中的行SelectionMode.MULTI

问题描述

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

我创建了一个 CSS：

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

在我的类视图中导入它：

@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？

或者如何在单击行时选择该行？

解决方法

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

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

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

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

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

java java vaadin