在GWT中，如何在celltable标题的顶部添加一行？

Question

这非常有趣，我们如何在GWT中的celltable标题上添加一行？

好吧，说，GWT Header只支持排序，但我也希望在每个列上做其他的东西（例如过滤器，隐藏，......）

所以我想在celltable的标题上添加一行。 在行上，有很多按钮，每个按钮对应一列。 当用户单击按钮时，他们可以执行其他操作，如过滤或隐藏。

例：

Button1 - Button2 - Button3。

Header1 - Header2 - Header3。

细胞11-细胞12-细胞13。

细胞21-细胞22-细胞23。

更多细胞......

Answer 1

使用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));
     }
   }
});

这里是产生上述代码的截图：

这种方法暗示你必须将gwtquery导入到你的项目中，但说实话，我不认为我没有它就在GWT项目上工作:-)，

当设计师要求增强gwt-widget时，Gquery会帮助很多，而你不想强制调整（大多数时候意味着复杂的编码和调查）来做一些非常简单的事情，比如修改由widget生成的dom。

另外Gquery附带了很多你可以利用的东西，比如简单的ajax语法，promises，插件，使用js方法和属性而无需编写jsni等。

Answer 2

好吧，它几乎不可能，在标题顶部添加一行，这是在cell table.

但是你说的功能可以通过添加一个zero padding的horizantalpanel并将你的buttons添加到该面板来实现（显然，按钮的宽度应与列宽和css相同。）

单击每个按钮，您可以对单元格进行操作或排序celltable.

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

Answer 3

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