如何在CellTable Gwt中設置ButtonCell樣式？

如何在CellTable Gwt中設置ButtonCell樣式？如何在CellTable Gwt中設置ButtonCell樣式？

我搜索互聯網&上發現2個解決方案：

- 溶液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：修改扣式（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，我可以看到的差（即扣式的風格得到了改變）。但是，我沒有「gwt-Button」css類，但只有「gwtButton」css類（請參閱上面的css）。但是，當我在第二個代碼sb.appendHtmlConstant("<button type=\"button\" class=\"gwtButton\" tabindex=\"-1\">");中將「gwt-Button」更改爲「gwtButton」時，則什麼也沒有發生。

那麼，如何樣式的鈕釦電池，以便它可以拿起gwtButton css class

來源

2013-10-23 Tum

如果發佈的代碼是什麼，你必須在你的頁面，你有一個錯誤的選擇，除非你複製的時候做了一個錯誤對你的問題。

嘗試.buttonCell.gwtButton
或更改.buttonCell.getButton改變.buttonCell.getButton只有.gwtButton

將帖子

好吧，我看到錯誤，你的風格設置的容器按鈕，所以你必須改變你的選擇器。使用在你的CSS資源這一個：

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

來源

2013-10-23 08:13:55

您好馬諾洛，謝謝你的回答。我嘗試了.buttonCell.gwtButton，但沒有發生任何事情。我改爲.gwtButton，然後樣式適用於整個單元而不是單元格內的按鈕，這是不正確的。我只想單元格內的按鈕獲得「gwtButton」風格。你可以在http://i.stack.imgur.com/w9LJt.png看到錯誤風格的圖片。 – Tum

你能像在開發工具或螢火蟲控制檯中看到的那樣發佈html代碼嗎？ –

嗨馬諾洛，你的意思是實際的HTML/Javascript代碼？這裏是上述代碼的查看源代碼（http://i.stack.imgur.com/WyiFk.png）。請告訴我，如果你的意思是別的。 – Tum

什麼工作對我來說是創建一個自定義按鈕Cell類（比方說，對於StyledButtonCell例如）延伸扣式，並推翻渲染方法合我的胃口。在我的下面的示例中，我指定了一個基本的引導按鈕樣式，並使用一個附加的圖標來使用按鈕文本。用於自定義按鈕細胞類

示例代碼（從基扣式類派生）：

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

}

樣品參照StyledButtonCell同時限定GWT表/列：

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

來源

2017-02-23 22:46:11 PrithvirajVasanth

如何在CellTable Gwt中設置ButtonCell樣式？

回答

相關問題