0

当按下按钮时，我更改了 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");
4

1 回答 1

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 指定当用户将鼠标悬停在 class 上selected-row时，它将使用 #DFE8F6 背景颜色。

于 2013-10-15T18:57:38.270 回答