1

如何在 CellTable Gwt 中设置 ButtonCell 的样式？

我在互联网上搜索并找到了2个解决方案：

- 解决方案 1：使用urColumn.setCelLStyleNames("yourStyleName");（向 ButtonCell 添加样式）

ButtonCell nextStepButton=new ButtonCell();
Column<String[], String> nextStepColumn = new Column<String[], String>(nextStepButton) {

        @Override
        public String getValue(String[] oneOrder) {
            return oneOrder[11];
        }
};
nextStepColumn.setCellStyleNames(getView().getRes().css().buttonCell());

在 CSS 中

.gwtButton, .buttonCell.getButton {
  margin: 0;
  padding: 5px 7px;
  text-decoration: none;
  cursor: pointer;
  cursor: hand;
  font-size:small;
  background: black;
  border:1px solid #bbb;
  border-bottom: 1px solid #a0a0a0;
  border-radius: 3px;
 -moz-border-radius: 3px;
  color: white;

}

我试过了，但什么也没发生。

-解决方案2：修改ButtonCell（https://code.google.com/p/google-web-toolkit/issues/detail?id=7044）

               ButtonCell nextStepButton=new ButtonCell(){
                    // A native button cell doesn't have the gwt-button class, which makes it
                      // look weird next to other gwt buttons. Fix that here.
                      @Override
                      public void render(
                          final Context context,
                          final SafeHtml data,
                          final SafeHtmlBuilder sb) {
                        sb.appendHtmlConstant("<button type=\"button\" class=\"gwt-Button\" tabindex=\"-1\">");
                        if (data != null) {
                          sb.append(data);
                        }
                        sb.appendHtmlConstant("</button>");
                      }
                };

对于解决方案2，我可以看到差异（即 ButtonCell 的样式已更改）。但是，我没有“ gwt-Button” css 类，而只有“ gwtButton” css 类（参见上面的 css）。但是，当我在第二个代码中将“gwt-Button”更改为“gwtButton”时，sb.appendHtmlConstant("<button type=\"button\" class=\"gwtButton\" tabindex=\"-1\">");什么也没发生。

那么，如何设置按钮单元格的样式以便它可以拾取gwtButton css class

4

2 回答 2

2

如果发布的代码是您页面中的代码，则选择器中有错误，除非您在复制到问题时出错。

  • 尝试.buttonCell.getButton改变.buttonCell.gwtButton
  • 或.buttonCell.getButton仅更改.gwtButton

[编辑]

好的，我看到了错误，您正在将样式设置为按钮的容器，因此您必须更改选择器。在你的 css 资源中使用这个：

.gwtButton button {
  margin: 0;
  padding: 5px 7px;
  ...
}
于 2013-10-23T08:13:55.220 回答
1

对我有用的是创建一个自定义 Button Cell 类（例如 StyledButtonCell），它扩展了 ButtonCell，并根据我的喜好覆盖了渲染方法。在下面的示例中，我指定了一个基本的引导按钮样式，并且还使用了一个附加图标来配合按钮文本。

自定义按钮单元类的示例代码（从基 ButtonCell 类派生）：

public class StyledButtonCell extends ButtonCell{
/**
   * Construct a new StyledButtonCell that will use a {@link SimpleSafeHtmlRenderer}.
   */
  public StyledButtonCell() {
    super(SimpleSafeHtmlRenderer.getInstance());
  }

  @Override
  public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
    sb.appendHtmlConstant("<button class=\"btn btn-default\" type=\"button\" tabindex=\"-1\">");
    sb.appendHtmlConstant("<i class=\"fa fa-refresh\"></i>");
    if (data != null) {
      sb.append(data);
    }
    sb.appendHtmlConstant("</button>");
  }

}

定义 gwt 表/列时对 StyledButtonCell 的示例引用：

... new Column<XYZClass, String>(new StyledButtonCell()) {
        @Override
        public String getValue(XYZClass object) {
            return "buttonText_goes_here";
        }
于 2017-02-23T22:46:11.633 回答