(GWT) How to fill-in color on a selected row in a table?
I have a table where the user clicks a check box to select a row.
I want to have it where the user clocks on the row of interest and have that row fill in with a colored background. How do I go about this in GWT?
EDIT: I would like to know how this can be achieved using the FlexTable. Thank you very 开发者_开发知识库much
To manipulate the row style on a click action add a ClickHandler
to the FlexTable object. In the onClick(ClickEvent)
you can get the cell clicked via the FlexTable method getCellForEvent(ClickEvent)
. The Cell returned contains information on the row (and column) number that was clicked. Via getRowFormatter().getElement()
you can get the element of the row and add a stylename to the row, to add color or directly in code set the color on the row in code.
Maybe you should use a celltable. Following is an example: http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellTable
In celltables, when you click a cell, the entire row gets highlighted. You can change the highlighted color with css to your desire.
Try the following code:
public class CellTableExample implements EntryPoint {
private static class Contact {
private String address;
private String name;
public Contact(String name, String address) {
super();
this.address = address;
this.name = name;
}
}
// The list of data to display.
private static List<Contact> CONTACTS = Arrays.asList(
new Contact("John", "123 Fourth Road asdf asdf asdfasdf"),
new Contact("Mary", "222 Lancer Lane")
);
@Override
public void onModuleLoad() {
CellTable<Contact> table = new CellTable<Contact>();
//address column
TextColumn<Contact> addressColumn = new TextColumn<Contact>(){
@Override
public String getValue(Contact contact) {
return contact.address;
}
};
//name column
TextColumn<Contact> nameColumn = new TextColumn<Contact>(){
@Override
public String getValue(Contact contact) {
return contact.name;
}
};
// Add the columns.
table.addColumn(nameColumn, "Name");
table.addColumn(addressColumn, "Address");
table.setRowCount(CONTACTS.size(), true);
table.setRowData(0, CONTACTS);
RootPanel.get().add(table);
}
}
精彩评论