DataGrid / CellTable样式沮丧 - 覆盖行样式 [英] DataGrid / CellTable styling frustration -- overriding row styles

问题描述

我试图强大的风格我的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 
 
} 
  

我在我的myDataGridResources.INSTANCE DataGrid构造函数。

当我试用它时，满足条件的行包含绿色（＃00ff00）文本，但背景颜色保持白色或灰色，取决于它为偶数行或奇数行。它是什么背景颜色被忽略的方式是什么？它在哪里得到那些颜色在第一个地方？我已经从css文件中完全删除了背景颜色信息。

解决方案

您可以创建一个自定义CSS文件， DataGrid通过定义一个新的风格资源。这是通过创建一个类型来扩展DataGrid.Resources，它知道你的CSS文件。然后将它传递给datagrid的构造函数。

为了提供一个相当完整的例子，首先为DataGrid风格创建一个新类型。 （定义一个这样的新类型只是唯一标识你的风格在GWT）。

  public interface MyStyle extends DataGrid.Style {$ b然后，在DataGrid.Resources中定义一个覆盖dataGridStyle（）方法存根的接口。 dataGridStyle方法应该返回之前定义的MyStyle。
 
 
 
注意给@Source注解的两个元素 - 你可以覆盖默认CSS中的任何类名（DataGridOverride.css）。
  public interface DataGridResource extends DataGrid.Resources {
 
 @Source（{DataGrid.Style.DEFAULT_CSS，DataGridOverride.css}）
 MyStyle dataGridStyle（）; 
}; 
  
要构造新样式的datagrid，所有你需要做的是：
  DataGridResource resource = GWT.create（DataGridResource.class）; 
 dataGrid = new DataGrid< T>（pageSize，resource）
  
 're增加重写样式的优先级，你可能需要重写任何其他需要更高优先级的样式，例如行悬停规则需要在行样式规则之后。
 
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.
解决方案
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.

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