This is very interesting, how can we add a row on top of header of celltable in GWT?
Ok, Say,GWT Header only support sorting, but i want to do other stuffs on each of the column as well (such filter, hide, ....)
So i want to add a row on top of header of 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.
Header1 - Header2 - Header3.
Cell 11 - Cell 12 - Cell 13.
Cell 21 - Cell 22 - Cell 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. 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. There are many ways to do that, but the easier way I know is using 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 :-),
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.
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.
Well, its almost not possible,that adding a row on top of header which is out of 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. )
On clicking of each button you can do the operations or sorting on 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.
You can have a look at the this CustomTableGrid showcase. It defines a custom CellTableBuilder
but the same principles should also apply to the HeaderBuilder
interface.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.