2013-04-05 76 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.

免责声明:这是我的可能的解决方案