Question

当按下一个按钮时，我改变了Grid组件中几行的背景，到目前为止我已经实现了它，但是，当用户将鼠标放在所选行上时，它不显示设置的颜色，如何更改鼠标在项目上的颜色以匹配所选的项目颜色？到目前为止的代码。

for(int i=0;i<grid.getStore().getCount();i++){
    Element row = (Element) grid.getView().getRow(i);
    row.getStyle().setProperty("backgroundColor", "#FFFFFF");
}
for(int item:items){
    Element row = (Element) grid.getView().getRow(item);
    row.getStyle().setProperty("backgroundColor", "#DFE8F6");
}

根据答案进行了更改。

for(int i=0;i<grid.getStore().getCount();i++){
    Element row = (Element) grid.getView().getRow(i);
    row.getStyle().setProperty("backgroundColor", "#FFFFFF");
    row.removeClassName("ps-grid-selected-row");                    
}
Element row = (Element) grid.getView().getRow(indexItem);
row.getStyle().setProperty("backgroundColor", "#DFE8F6");
//              row.getStyle().setProperty("hover", "#DFE8F6");
row.addClassName("ps-grid-selected-row");

Answer 1

将鼠标添加到行上的最简单方法是通过CSS。在CSS文件中，添加如下条目：

.selected-row:hover {
  background-color: #DFE8F6;
}

回到你的代码中，而不是设置背景颜色，只需添加CSS类：

for(int i=0;i<grid.getStore().getCount();i++){
  Element row = (Element) grid.getView().getRow(i);
  row.removeClassName( "selected-row" );
}
for(int item:items){
  Element row = (Element) grid.getView().getRow(item);
  row.addClassName( "selected-row" );
}

选择行时，只需添加selected-row类名，如果未选中，则只需删除类名。 CSS指定当用户将鼠标悬停在类selected-row上时，它将使用＃DFE8F6背景颜色。

选中后，更改GWT Grid的行鼠标悬停颜色

1 个答案: