DataGrid / CellTable造型受挫 - 覆盖行样式

时间:2011-09-12 21:16:00

标签: css gwt datagrid styling

我正在努力设计我的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文件中删除了背景颜色信息。

2 个答案:

答案 0 :(得分:12)

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

为了提供一个相当完整的示例,首先为DataGrid样式创建一个新类型。 (定义这样的新类型只能在GWT中唯一标识您的样式。)

public interface MyStyle extends DataGrid.Style {
}

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

注意给@Source注释的两个元素 - 你可以在你提供的第二个文件中覆盖默认CSS(DataGrid.css)中的任何类名(这里是“DataGridOverride.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)

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

答案 1 :(得分:3)

请参阅http://code.google.com/p/google-web-toolkit/issues/detail?id=6144#c3(这不是错误!)

简而言之,扩展DataGrid.Style(目标只是拥有一个新类型,您不必添加任何内容)并让您的dataGridStyle重写方法返回您自己的子类型而不是DataGrid.Style(由于返回类型的协方差,它会起作用)