Question

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

我搜索了互联网＆amp;找到了2个解决方案：

-Solution 1：使用urColumn.setCelLStyleNames("yourStyleName");（Adding style to a 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;

}

我试过但没有发生任何事情。

-Solution2：修改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）。但是，当我在第二个代码sb.appendHtmlConstant("<button type=\"button\" class=\"gwtButton\" tabindex=\"-1\">");中将“gwt-Button”更改为“gwtButton”时，没有任何反应。

那么，如何设置Button单元格的样式以便它可以选择gwtButton css class

Answer 1

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

尝试使用.buttonCell.getButton

.buttonCell.gwtButton

或仅使用.buttonCell.getButton

.gwtButton

[EDITED]

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

.gwtButton button {
  margin: 0;
  padding: 5px 7px;
  ...
}

Answer 2

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

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

... new Column<XYZClass, String>(new StyledButtonCell()) {
        @Override
        public String getValue(XYZClass object) {
            return "buttonText_goes_here";
        }

}

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

from pyparsing import (CaselessKeyword, Word, alphas, MatchFirst, quotedString, 
    infixNotation, opAssoc, Suppress, Group)


LINE_CONTAINS, LINE_STARTSWITH, LINE_ENDSWITH = map(CaselessKeyword,
    """LINE_CONTAINS LINE_STARTSWITH LINE_ENDSWITH""".split())
NOT, AND, OR = map(CaselessKeyword, "NOT AND OR".split())
BEFORE, AFTER, JOIN = map(CaselessKeyword, "BEFORE AFTER JOIN".split())

keyword = MatchFirst([LINE_CONTAINS, LINE_STARTSWITH, LINE_ENDSWITH, NOT, AND, OR, 
                      BEFORE, AFTER, JOIN])
phrase_word = ~keyword + Word(alphas + '_')

phrase_term = phrase_word | quotedString

phrase_expr = infixNotation(phrase_term,
                            [
                             ((BEFORE | AFTER | JOIN), 2, opAssoc.LEFT,),
                             (NOT, 1, opAssoc.RIGHT,),
                             (AND, 2, opAssoc.LEFT,),
                             (OR, 2, opAssoc.LEFT),
                            ],
                            lpar=Suppress('{'), rpar=Suppress('}')
                            )

line_term = Group((LINE_CONTAINS | LINE_STARTSWITH | LINE_ENDSWITH)("line_directive") + 
                  Group(phrase_expr)("phrase"))
line_contents_expr = infixNotation(line_term,
                                   [(NOT, 1, opAssoc.RIGHT,),
                                    (AND, 2, opAssoc.LEFT,),
                                    (OR, 2, opAssoc.LEFT),
                                    ]
                                   )

sample = """
LINE_CONTAINS transfected BEFORE {sirna} AND gene AND LINE_STARTSWITH Therefore
"""

line_contents_expr.runTests(sample)

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

2 个答案: