gwt - 在 GWT 中，如何在单元格表的标题顶部添加一行？

Question

这很有趣，我们如何在 GWT 中的单元格表的标题顶部添加一行？

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

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

例子:

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

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-widgets 并且您不想强制调整(大多数时候意味着复杂的编码和调查)来执行非常简单的事情时，Gquery 会提供很多帮助，例如修改由小部件生成的 dom。

此外，Gquery 附带了许多您可以利用的东西，例如简单的 ajax 语法、promise、插件、使用 js 方法和属性而无需编写 jsni 等。