Vaadin Table row inline editing

问题

I created a table in vaadin and I have an edit button for each row of the table.I tried

table.setEditable(true) 

but that makes the whole table editable. When I click the button edit I want only the selected row to be editable and if it is possible some cells to be customized example checkbox, dropdown etc. Any suggestions?

回答1:

Here is a very simplistic example:

final Table table = new Table();
table.setEditable(true);
table.setTableFieldFactory(new TableFieldFactory() {
    private static final long serialVersionUID = 1L;

    @Override
    public Field<?> createField(Container container, Object itemId, Object propertyId, Component uiContext) {
        if (itemId == table.getData()) {
            return DefaultFieldFactory.get().createField(container, itemId, propertyId, uiContext);
        }
        return null;
    }
});
table.addGeneratedColumn("", new ColumnGenerator() {
    private static final long serialVersionUID = 1L;

    @Override
    public Object generateCell(Table source, final Object itemId, Object columnId) {
        Button button = new Button(itemId == table.getData() ? "Save" : "Edit");
        button.addClickListener(new ClickListener() {
            private static final long serialVersionUID = 1L;

            @Override
            public void buttonClick(ClickEvent event) {
                if (table.getData() == null) {
                    // edit
                    table.setData(itemId);
                    table.refreshRowCache();
                } else if (itemId == table.getData()) {
                    // save
                    table.setData(null);
                    // ...
                    table.refreshRowCache();
                }
            }
        });
        return button;
    }
});
// ...

回答2:

It is vaadin's default behaviour. For changing default behaviours you can extend/rewrite components.

Vaadin offers some basic things but for specific things:

1- Search the vaadin addon directory: https://vaadin.com/en_GB/directory

2- If no result I'm afraid we must write/change component codes.

回答3:

Similar to your problem: I have a table with two columns, but just one edit button. When a row is selected and the edit button is clicked the selected row becomes editable. Here is my code to make the table editable and how to pass the changed values into the table and update the edited row:

private List<Field> fields = new ArrayList<>();

private final class EditTableClickListener implements ClickListener {

    @Override
    public void buttonClick(ClickEvent event) {
        if (mappingTable.getSelection() != null) {
            // change table menu when in Edit-Mode
            editTableBar();
            makeRowEditable();
        }
    }

    private void makeRowEditable() {
        mappingTable.setTableFieldFactory(new TableFieldFactory() {

            @SuppressWarnings("rawtypes")
            @Override
            public Field<?> createField(Container container, Object itemId, Object propertyId, Component uiContext) {
                if(itemId.equals(mappingTable.getSelection())) {
                    Field field = DefaultFieldFactory.get().createField(container, itemId, propertyId, uiContext);
                    field.setBuffered(true);
                    field.addAttachListener(new AttachListener() {
                        private static final long serialVersionUID = 1L;

                        @Override
                        public void attach(AttachEvent event) {
                            fields.add((Field)event.getConnector());
                        }
                    });

                    field.addDetachListener(new DetachListener() {
                        private static final long serialVersionUID = 1L;

                        @Override
                        public void detach(DetachEvent event) {
                            fields.remove((Field)event.getConnector());
                        }
                    });

                    return field;
                }
                return null;
            }
        });

        mappingTable.setEditable(true);
    }
}

// save when ENTER key is clicked in one of the TextFields
private final class SaveEditedRowShortcutListener extends ShortcutListener {

    private SaveEditedRowShortcutListener(String caption, int keyCode, int[] modifierKeys) {
        super(caption, KeyCode.ENTER, null);
    }

    @Override
    public void handleAction(Object sender, Object target) {
        for(Field field : fields) {
             field.commit();
         }

         String key = fields.get(0).getValue().toString();
         String value = fields.get(1).getValue().toString();

         Object selection = mappingTable.getSelection();
         selection.setKey(key);
         selection.setValue(value);

          mappingTable.setEditable(false);
          mappingTable.updateItem(selection);
          // change table menu back to Default-Mode
          initialTableBar();
    }
}

来源：https://stackoverflow.com/questions/16142212/vaadin-table-row-inline-editing