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

发布于 2024-12-04 00:35:09 字数 1077 浏览 0 评论 0原文

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

原文

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 "";
      }
  }
});

The style alertRow is simply this:

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

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();

}

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

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

等数载，海棠开 2024-12-11 00:35:09

您可以创建自定义 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)

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

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.

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 {
}

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

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.

回复收藏 0 原文