DataGrid/CellTable 样式设置失败——覆盖行样式 [英] DataGrid / CellTable styling frustration -- overriding row styles

问题描述

我正在大力尝试为我的 GWT 2.4 DataGrid 设计样式，但每次都遇到障碍.我已将以下行样式添加到我的 DataGrid:

I'm trying mightily to style my GWT 2.4 DataGrid, and hit roadblocks at every turn. I've added the following row styling to my 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 的样式很简单:

The style alertRow is simply this:

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

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

More information: I've made a local copy of DataGrid.css and removed ALL "background" elements from all the styles, and I've used this to construct a 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).

I've used this (MyDataGridResources.INSTANCE) in my DataGrid constructor.

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

When I try it out, the rows that meet the criteria contained green (#00ff00) text, but the background colour remains white or grey depending on whether it is an even row or an odd row. How is it that background-color is ignored the way it is? Where is it getting those colors in the first place?! I've removed background color information from the css file completely.

推荐答案

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

You can create a custom CSS file and provide this to the DataGrid through defining a new style resource. This is done by creating a type that extends DataGrid.Resources, which knows about your CSS file. You then pass this to the constructor of the datagrid.

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

To provide a fairly complete example, first create a new type for the DataGrid style. (Defining a new type like this just uniquely identifies your style within GWT).

public interface MyStyle extends DataGrid.Style {
}

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

Then, define an interface which overrides the dataGridStyle() method stub in DataGrid.Resources. The dataGridStyle method should return the previously defined MyStyle.

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

Note the two elements given to the @Source annotation - you can just override any of the class names in the default CSS (DataGrid.css) in the second file you provide ("DataGridOverride.css" here).

public interface DataGridResource extends DataGrid.Resources {

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

要构建新样式的数据网格，您只需:

To construct your newly-styled datagrid all you need to do is:

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

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

One subtlety is as you're increasing the precedence of the overridden styles, you may need to override any other styles that require higher precedence, for example the row hover rules need to come after the row styling rules.

这篇关于DataGrid/CellTable 样式设置失败——覆盖行样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！