Question

我在vaadin中创建了一个表，我为表的每一行都有一个编辑按钮。我试过了

table.setEditable(true)

但这使整个表格可编辑。当我单击按钮编辑时，我只希望所选行可以编辑，如果可以自定义一些单元格示例复选框，下拉列表等任何建议？

Answer 1

这是一个非常简单的例子：

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;
    }
});
// ...

Answer 2

这是vaadin的默认行为。要更改默认行为，您可以扩展/重写组件。

Vaadin提供一些基本的东西，但具体的东西：

1-搜索vaadin插件目录：https://vaadin.com/en_GB/directory

2-如果没有结果我担心我们必须写/更改组件代码。

Answer 3

与您的问题类似：我有一个包含两列的表格，但只有一个编辑按钮。选择行并单击编辑按钮后，所选行将变为可编辑状态。以下是我的代码，使表格可编辑和如何将更改的值传递到表格中并更新已编辑的行：

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

Vaadin表行内联编辑

3 个答案: