GWT Button下拉列表在子表的单元格事件处理中

Question

I have too many buttons in a table and I'd like to replace them by a button that open a dropdown list of actions. However I don't really know how to handle the events from the dropdown items. I manage to do it using a javascript function but it's not very practical because I can only pass primitive values.

I also want to make it as a custom cell in the future to use it in different pages in my project so returning some html isn't very practical.

Here's my code :

     final ButtonCell buttonInfoCell = new ButtonCell();
         Column<GwtStockProduct, String> buttonCell = new Column<GwtStockProduct, String>(buttonInfoCell) {

     @Override
     public void render(final Context context, final GwtStockProduct value, final SafeHtmlBuilder sb) {
     Div div = new Div();
     Div bG = new Div();
     div.add(bG);
     bG.addStyleName("btn-group");

     Button button = new Button();
     DropDownMenu dropDown = new DropDownMenu();

     Span span = new Span();
     span.addStyleName("caret");
     span.setVisible(false);
     button.add(span);

     button.getElement().setAttribute("style", "background-image: none !important; background-color: #234C78 !important;");
     // button.removeStyleName("");
     button.addStyleName("btn-hide-icon btn-blue");
     button.setDataToggle(Toggle.DROPDOWN);
     button.setText("Change stock");

     for (int i = 1; i < 5; ++i) {
     AnchorListItem item = new AnchorListItem();
     item.getElement().getFirstChildElement().removeAttribute("href");
     item.getElement().getFirstChildElement().setAttribute("onclick", "triggerClick('" + i + "')");
     item.setText("Item " + i);
     dropDown.add(item);
     }

     // dropDown.getElement().setAttribute("style", "position: relative !important;");
     bG.add(button);
     bG.add(dropDown);

     // sb.append(SafeHtmlUtils.fromTrustedString(buttonGroup));
     sb.appendHtmlConstant(div.getElement().getInnerHTML());
     }

     @Override
     public String getValue(final GwtStockProduct object) {
     // TODO Auto-generated method stub
     return null;
     }
     };

     stockTable.addColumn(buttonCell, "Actions");
     stockTable.setColumnWidth(buttonCell, 5, Unit.PCT);

Answer 1

I use SelectionCell to render a drop-down list of options. Maybe that will help you:

ArrayList<String> options = new ArrayList<String>();
options.add("choose an option..."); // the prompt text
options.add("option 1");
options.add("option 2");
// ...

final SelectionCell optionsCell = new SelectionCell(options);

Column<TableType, String> optionsColumn = new Column<TableType, String>(optionsCell) {
    @Override
    public String getValue(TableType object) {
        return null;
    }
};
optionsColumn.setFieldUpdater(new FieldUpdater<TableType, String>() {
    @Override
    public void update(int index, TableType object, String value) {
        if(value == "option 1")
            // process option 1
        else if(value == "option 2")
            // process option 2
        // ...

        // reset drop-down to show the prompt text
        optionsCell.clearViewData(object);
        redrawRow(index);
    }
});

table.addColumn(optionsColumn, "options");

The first option is just a prompt text and after each selection change the drop-down list is reset to show the prompt.

The disadvantage is that you can not have different sets of options for different rows as the list is generated once for the whole column.