DataGrid / CellTable 样式受挫——覆盖行样式

Question

我正在努力设计我的 GWT 2.4 DataGrid 的样式，并且每时每刻都遇到障碍。我在 DataGrid 中添加了以下行样式：

dataTable.setRowStyles(new RowStyles<IntegrityItem>() {
  @Override
  public String getStyleNames(IntegrityItem row, int rowIndex) {
      if (row.getSomeValue() >= 100) {
        return MyResources.INSTANCE.mystyles().alertRow();
      } else {
        return "";
      }
  }
});

alertRow 的样式很简单：

.alertEntry {
    font-weight: bold;
    color: #00ff00;
    background-color: #ff0000;
}

更多信息：我制作了 DataGrid.css 的本地副本，并从所有样式中删除了所有“背景”元素，并使用它来构造 ClientBundle：

public interface MyDataGridResources extends DataGrid.Resources {

  public static final FmeaDataGridResources INSTANCE = GWT.create(MyDataGridResources.class);

  @Override
  @Source({"../resources/styling/mydatagridstyles.css"})
  Style dataGridStyle();

}

我在我的 DataGrid 构造函数中使用了这个 (MyDataGridResources.INSTANCE)。

当我试用它时，符合条件的行包含绿色 (#00ff00) 文本，但背景颜色保持为白色或灰色，具体取决于它是偶数行还是奇数行。背景颜色是如何被忽略的？它首先从哪里获得这些颜色？我已经从 css 文件中完全删除了背景颜色信息。

Answer 1

您可以创建自定义 CSS 文件并通过定义新样式资源将其提供给 DataGrid。这是通过创建一个扩展 DataGrid.Resources 的类型来完成的，它知道您的 CSS 文件。然后将其传递给数据网格的构造函数。

为了提供一个相当完整的示例，首先为 DataGrid 样式创建一个新类型。 （像这样定义新类型只是在 GWT 中唯一标识您的样式）。

public interface MyStyle extends DataGrid.Style {
}

然后，定义一个覆盖 DataGrid.Resources 中的 dataGridStyle() 方法存根的接口。 dataGridStyle 方法应该返回之前定义的 MyStyle。

注意 @Source 注释的两个元素 - 您可以在您提供的第二个文件（此处为“DataGridOverride.css”）中覆盖默认 CSS (DataGrid.css) 中的任何类名。

public interface DataGridResource extends DataGrid.Resources {

  @Source({ DataGrid.Style.DEFAULT_CSS, "DataGridOverride.css" })
  MyStyle dataGridStyle();
};

要构建新样式的数据网格，您需要做的就是：

DataGridResource resource = GWT.create(DataGridResource.class);
    dataGrid = new DataGrid<T>(pageSize, resource)

一个微妙之处是，当您增加被覆盖样式的优先级时，您可能需要覆盖任何其他需要更高优先级的样式，例如行悬停规则需要位于行样式规则之后。

Answer 2

见http://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3（这不是错误！）

简而言之，扩展DataGrid.Style（目标只是拥有一个新类型，您不必向其中添加任何内容）并让您的dataGridStyle 覆盖方法返回您自己的子类型而不是DataGrid.Style（由于返回类型协方差，它会起作用）