create link in table cell and open float popup by click from it

问题

I have a CellTable and need a column with hyper links and onclick handlers inside cells. 1st question, what am doing wrong if I have:

Column<MyObject, Anchor> linkColumn = new Column<MyObject, Anchor>(
    new AnchorCell()) {
    @Override
    public Anchor getValue(final obj) {
    Anchor link = new Anchor("link");
    link.addClickHandler(new ClickHandler() {
        @Override
        public void onClick(ClickEvent event) {
        Window.alert("clicked ");
        }
    });
    return link;
    }
};
cellTable.addColumn(linkColumn, "link column");

...

public class AnchorCell extends AbstractCell<Anchor> {
@Override
public void render(Context context, Anchor h, SafeHtmlBuilder sb) {
    sb.append(SafeHtmlUtils.fromTrustedString(h.toString()));
}
}

-but clicking to link - happens nothing

and 2nd question: what's better way to open float (based on div or so, not separated browser window) pupup with text contents from that ClickHandler?

回答1:

In a CellTable, you aren't adding the Anchor widget to the table. You're just adding some HTML. None of the widget's functions will work as they normally would, because the widget is not actually in the table.

You can override onBrowserEvent to get events like clicking on the cells. These events still happen because they are native to the browser and don't need the widget framework to propagate. I think this is the best way to achieve the effect you want.

回答2:

I have a similar setup as you. A CellTable (now a DataGrid) with hyperlinks in it, but I want to popup an editor widget when the user clicks in the cell but not on the link-y bit. If he clicks on the link, I want the normal HTML behaviour.

Create your column using the ClickableTextCell class. What's stored in the cell? A string ID into my database of user records, which includes the name and email of the user. When I create the column, I override the render method so that the information is rendered as a email link:

Column<RowType, ColumnType> emailColumn = new Column<RowType, ColumnType>(new ClickableTextCell()){

    @Override
    public void render(Context context, T object, SafeHtmlBuilder sb) {
    /* Code that pulls the value in this column at this row, uses 
     * it to look up the name and the email, then does sb.appendX 
     * to build up the "<a href='emaillink'>name</a>" SafeHtml
     * construction.
     */
    }

 };

Actually, I have a subclass of Column, but you get the idea.

Voila, an active HTML link on your page, but a clickable text cell underneath. I found this a lot easier than dealing with browser events.

I use the same structure for many of my cells. ClickableTextCells underneath, and type-specific rendering code to present it to the user in the format expected. In particular, we have a dynamic picklist type of field -- that is, the picklist is not known until the click occurs. The standard selectionCell requires the list of picks to be established once at construction time, which is what got me to this solution. So instead of a standard SelectionCell dropdown, which wouldn't work anyway without some serious work**, I use this technique. When the ClickableTextCell fires, I have set the FieldUpdater to construct a popup with a DataGrid in it, this DataGrid listing the current set of legal values for this selection (as determined by the current state of the database). When the user makes his selection and hits the Save button, the popup closes, the middleware is called to update his choice, the updated row data is returned via that RPC call, the data returned being used to update the internal client-side database, which triggers an update of all the ListDataProviders driving the DataGrids, which automatically updates the main DataGrid (and any other DataGrid potentially visible on the screen).

Actually, my solution has extended the ClickableTextCell into a DoubleClickableTextCell so that you need to double-click to activate the editor. Not required, of course, but it allows for the user to idly click around the grid without popups exploding in front of him.

** Besides the dynamic aspect, this dynamic selections can be very long lists, so a dropdown is a poor choice. Better to present a DataGrid that the user can scroll through, search, filter, and so on.

来源：https://stackoverflow.com/questions/7387019/create-link-in-table-cell-and-open-float-popup-by-click-from-it