4

这很有趣,我们如何在 GWT 中的 celltable 的顶部添加一行?

好的,说,GWT Header 只支持排序,但我也想在每一列上做其他的东西(比如过滤器,隐藏,....)

所以我想在单元格表的标题顶部添加一行。一行上有r个按钮,每个按钮对应一列。当用户单击按钮时,他们可以执行其他操作,例如过滤或隐藏。

例子:

按钮 1 - 按钮 2 - 按钮 3。

页眉 1 - 页眉 2 - 页眉 3。

单元 11 - 单元 12 - 单元 13。

单元格 21 - 单元格 22 - 单元格 23。

更多细胞....

4

3 回答 3

3

使用 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

这种方法意味着您必须将gwtquery导入您的项目,但老实说,我不认为我在没有它的情况下从事 GWT 项目:-),

当设计人员要求增强 gwt-widgets 并且您不想强制执行调整(这通常意味着复杂的编码和调查)来执行非常简单的事情(例如修改小部件生成的 dom)时,Gquery 有很大帮助。

此外,Gquery 提供了很多可以利用的东西,比如简单的 ajax 语法、promise、插件、使用 js 方法和属性而无需编写 jsni 等。

于 2013-04-06T09:40:50.677 回答
0

好吧,几乎不可能,在标题顶部添加一行cell table.

但是你说的功能可以通过添加一个horizantalpanelzero padding并将你添加 buttons到该面板来实现(显然按钮的宽度应该与你的列宽度相同并且几乎没有css。)

单击每个按钮后,您可以进行操作或排序celltable.

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

于 2013-04-05T19:36:54.073 回答
0

从 GWT 2.5 开始,应该可以提供自定义HeaderBuilder或扩展AbstractHeaderOrFooterBuilder / DefaultHeaderOrFooterBuilder来解决您的问题。
你可以看看这个CustomTableGrid展示。它定义了一个自定义CellTableBuilder,但同样的原则也应该适用于HeaderBuilder接口。

于 2013-04-08T08:59:22.007 回答