(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);
}
}
加载中,请稍侯......
精彩评论