2013-04-05 81 views
3

這非常有趣,我們如何在GWT的celltable頭部添加一行?,如何在celltable頭部添加一行?

好吧,我說,GWT頭只支持排序,但我想要做的每一列的其他東西,以及(如過濾器,隱藏,....)

所以我想添加一行在celltable的標題之上。在行上,有許多按鈕,每個按鈕對應一列。當用戶點擊一個按鈕,然後他們可以做其他的東西,如過濾器或隱藏。

示例:

Button1 - Button2 - Button3。

Header1 - Header2 - Header3。

細胞11 - 12細胞 - 細胞13.

細胞21 - 細胞22 - 細胞23.

多種細胞....

回答

2

使用GWT的唯一方法是擴展CellTable實現並在CellTable創建其標頭的部分創建自己的黑客代碼。你也必須考慮添加許多方法來添加按鈕,處理程序等。我已經處理過這個,這是一個非常繁瑣的任務。

但是,您可以選擇在創建表格後修改DOM。有很多方法可以做到這一點,但我知道的更簡單的方法是使用gwtquery aka gquery。

在你的情況我會使用這樣的代碼:

// import gquery stuff 
import static com.google.gwt.query.client.GQuery.*; 

// Create your table and add its colums 
final CellTable<MyObject> celltable = ... 
[...] 

// Delay until the table has been full rendered, I use gquery delay() because 
// of its syntax but you could use Scheduler or Timer as well 
$(celltable).delay(0, new Function(){ 
    public void f() { 

    // Now we add a div to each header, you could add any html though 
    $("th", celltable).prepend($("<div class='mypanel' style='height: 40px'/>")); 

    // gquery's widget plugin is able to promote certain dom elements 
    // like div/th/... etc into HTMLpanels 
    GQuery panels = $(".mypanel", celltable).as(Widgets).panel(); 

    // gquery can return a sorted list of widgets asociated with a set of elements 
    List<HTMLPanel> list = panels.widgets(HTMLPanel.class); 

    // Now you can add any gwt widget to your panels 
    for (int i = 0; i < list.size(); i++) { 
     list.get(i).add(new Button("Button: " + i)); 
    } 
    } 
}); 

這裏的東西產生上面的代碼截圖:

CellTable with buttons

這種方法意味着你必須輸入gwtquery進入你的項目,但說實話,我不會想象我在沒有它的GWT項目上工作:-),

Gquery當設計師要求增強gwt-widgets並且你不想強制調整(大多數時候意味着複雜的編碼和調查)來做非常簡單的事情,比如修改由小部件生成的dom時,它會有很大的幫助。

此外,Gquery帶有很多你可以利用的東西,比如簡單的ajax語法,承諾,插件,使用js方法和屬性而不用寫jsni等。

+0

真棒!只有三行gquery代碼完成所有工作。 – 2013-04-06 10:27:54

0

那麼,它幾乎不可能的,該添加在頭部的頂行是出於cell table.

但你說可以通過添加horizantalpanel與zero padding並添加您buttons到面板acheive功能(顯然寬度按鈕應該與您列的寬度和小css。 )

上的每個按鈕可以執行操作的點擊或排序上celltable.

免責聲明:這是我的可能的解決方案