Question

有没有办法改变全球gwt数据网格的选择颜色？我在main-app-css文件中添加了以下css-format：

.dataGridSelectedRow {
  background: #1EDA17;
  color: white;
  height: auto;
  overflow: auto;
}

我也看过以下链接： http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideUiCss.html

可悲的是，我的改变没有效果。我是否会错过任何setStyleName（）调用？

Answer 1

还有另一种为DataGrid中的选定行设置自定义css格式的方法。您需要创建扩展DataGrid.Resources的自定义接口。在这个接口中你应该ovveride方法dataGridStyle（）和@Source annotaion把路径放到你的自定义css文件中。例如：

import com.google.gwt.user.cellview.client.DataGrid;
import com.google.gwt.user.cellview.client.DataGrid.Resources;

public interface CustomDataGridResources extends Resources {

public interface CustomDataGridResources extends Resources {
    @Source({DataGrid.Style.DEFAULT_CSS, "resources/CustomDataGridStyles.css"})
    CustomStyle dataGridStyle();

    interface CustomStyle extends DataGrid.Style {
    }
}

如果您只想更改所选行的样式，那么您的css文件将仅包含：

.dataGridSelectedRow {
  background: #1EDA17;
  color: white;
  height: auto;
  overflow: auto;
}

但我也更喜欢改变行的方式：

.dataGridHoveredRow {
  cursor: pointer;
  cursor: hand; 
}

另见similar discussion。

要将自定义样式应用于DataGrid，可以使用grid的构造函数

public DataGrid(int pageSize, Resources resources, ProvidesKey<T> keyProvider)

其中Resource是实现自定义界面的实例（在我的例子中是 CustomDataGridResources ）。

DataGrid.Resources customDataGridResources = GWT.create(CustomDataGridResources.class)

Answer 2

自定义css将无效，因为GWT会使用clean.css覆盖它。如果您使用FIREBUG或任何其他工具，您可能会认出它。解决方案很简单。将！important 添加到未受自定义css影响的每一行

.dataGridSelectedRow {
  background: #1EDA17 !important;
  color: white !important;
  height: auto !important;
  overflow: auto !important;
}

GWT - 数据网格选择颜色

2 个答案: