开发者

(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); 
    }

}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜