[英]in GWT, How to add a row on top of header of celltable?
This is very interesting, how can we add a row on top of header of celltable in GWT? 这非常有趣,我们如何在GWT中的celltable标题上添加一行?
Ok, Say,GWT Header only support sorting, but i want to do other stuffs on each of the column as well (such filter, hide, ....) 好吧,说,GWT Header只支持排序,但我也希望在每个列上做其他的东西(例如过滤器,隐藏,......)
So i want to add a row on top of header of celltable. 所以我想在celltable的标题上添加一行。 On the row, there r many button, each button is corresponding to a column. 在行上,有很多按钮,每个按钮对应一列。 When user click a button then they can do other stuffs like filter or hide. 当用户单击按钮时,他们可以执行其他操作,如过滤或隐藏。
Example: 例:
Button1 - Button2 - Button3. Button1 - Button2 - Button3。
Header1 - Header2 - Header3. Header1 - Header2 - Header3。
Cell 11 - Cell 12 - Cell 13. 细胞11-细胞12-细胞13。
Cell 21 - Cell 22 - Cell 23. 细胞21-细胞22-细胞23。
more cell.... 更多细胞......
The only way using GWT is extending the CellTable
implementation and create your own hacking code in the part where CellTable
creates its header. 使用GWT的唯一方法是扩展CellTable
实现,并在CellTable
创建其头部的部分中创建自己的黑客代码。 Also you have to consider adding many methods to add buttons, handlers etc. I have deal with this before and it is a very tedious task. 此外,你必须考虑添加许多方法来添加按钮,处理程序等。我之前已经处理过这个问题,这是一个非常繁琐的任务。
But you have the option of modifying the DOM
once the table has been created. 但是,您可以选择在创建表后修改DOM
。 There are many ways to do that, but the easier way I know is using gwtquery aka gquery. 有很多方法可以做到这一点,但我知道的更简单的方法是使用gwtquery aka gquery。
In your case I would use a code like this: 在你的情况下,我会使用这样的代码:
// 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));
}
}
});
Here a screenshot of what produces the code above: 这里是产生上述代码的截图:
This approach implies that you have to import gwtquery into your project, but honestly, I dont imagine me working on a GWT project without it :-), 这种方法暗示你必须将gwtquery导入到你的项目中,但说实话,我不认为我没有它就在GWT项目上工作:-),
Gquery helps a lot when designers ask for enhancing gwt-widgets and you don't want to enforce tweaks (which most times implies complex coding and investigation) to do very simple things like to modify the dom generated by a widget. 当设计师要求增强gwt-widget时,Gquery会帮助很多,而你不想强制调整(大多数时候意味着复杂的编码和调查)来做一些非常简单的事情,比如修改由widget生成的dom。
Additionally Gquery comes with a lot of stuff you can take advantage of, like easy ajax syntax, promises, plugins, use js methods and properties without writing jsni, etc. 另外Gquery附带了很多你可以利用的东西,比如简单的ajax语法,promises,插件,使用js方法和属性而无需编写jsni等。
Well, its almost not possible,that adding a row on top of header which is out of cell table.
好吧,它几乎不可能,在标题顶部添加一行,这是在cell table.
But the functionality you said can acheive by adding a horizantalpanel with zero padding
and adding your buttons
to that panel (obviously widths of buttons should same as your columns widths and with little css. ) 但是你说的功能可以通过添加一个zero padding
的horizantalpanel并将你的buttons
添加到该面板来实现(显然,按钮的宽度应与列宽和css相同。)
On clicking of each button you can do the operations or sorting on celltable.
单击每个按钮,您可以对单元格进行操作或排序celltable.
disclaimer:this is my possible solution . 免责声明:这是我可能的解决方案 。
Since GWT 2.5 it should be possible to provide a custom HeaderBuilder
or extend AbstractHeaderOrFooterBuilder / DefaultHeaderOrFooterBuilder to solve your problem. 从GWT 2.5开始,应该可以提供自定义HeaderBuilder
或扩展AbstractHeaderOrFooterBuilder / DefaultHeaderOrFooterBuilder来解决您的问题。
You can have a look at the this CustomTableGrid showcase. 您可以查看此CustomTableGrid展示。 It defines a custom CellTableBuilder
but the same principles should also apply to the HeaderBuilder
interface. 它定义了一个自定义的CellTableBuilder
但同样的原则也应该适用于HeaderBuilder
接口。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.