Vaadin 14 grid с флажками в качестве визуализируемых компонентов - PullRequest
Новая
       15

Vaadin 14 grid с флажками в качестве визуализируемых компонентов

1 голос
/ 23 октября 2019

Я создал сетку из четырех столбцов. Первый столбец показывает имя, остальные три столбца представляют разные роли. Каждый из этих трех столбцов заполнен флажками, чтобы назначить определенную роль определенному имени. Это так далеко, как я зашел так далеко. В каждом столбце и в каждой строке должен быть разрешен только один выбранный флажок. Таким образом, в общей сложности у меня есть только один выбор на столбец флажок. Как мне это реализовать?

1 Ответ

2 голосов
/ 23 октября 2019

Редактировать: Я понимаю, что, возможно, неправильно понял вопрос. Если вы хотите иметь 3 столбца, в каждом из которых есть несколько флажков, в которых можно выбрать только 1 столбец, то вы должны использовать RadioButtonGroup в каждом столбце и связывать каждый из них с различным полем Enum вашего класса griditem.

Вместо того, чтобы показывать, как сделать три столбца с CheckBox в каждом, при этом можно выбрать только один CheckBox, я покажу другим способом , чтобы получить ту же информацию оitem.

Причина этого заключается в том, что то, чего вы хотите достичь, нелегко выполнить, поскольку каждый CheckBox определен в области действия, которой не известны другие флажки того же элемента. Поэтому вам нужно будет реализовать правило «только один выбранный» внутри сеттеров itemclass, что не является оптимальным. Я имею в виду, что это возможно, но я бы лучше изменил структуру на более подходящую. Обычно вы не хотите использовать подобную бизнес-логику в своих классах компонентов.

Как бы я решил эту проблему?
Создайте новый Enum , заменит все 3 логических поля в вашем классе предметов. Теперь в вашей таблице вам понадобится только один столбец для ComboBox, чтобы выбрать enum.
Я выбрал Enum, потому что здесь он идеально соответствует вашим потребностям. С помощью Enum у вас может быть несколько вариантов, но вы можете выбрать только один (или ни один).

Чтобы лучше показать, что я имею в виду, давайте используем пример класса для элементов сетки, Foo. Ваша версия имеет 3 логических значения, с которыми связаны ваши три grid-CheckBox. Давайте назовем их isA, isB, isC. 

// your version of the griditem class
public class Foo {
    private boolean isA, isB, isC = false;

    // constructor, getters, setters 
}

// how the columns are added in the grid (approximately) (without editor):
Grid<Foo> grid = new Grid<>();
grid.addComponentColumn((item) -> {
    CheckBox checkBox = new CheckBox();
    checkBox.setValue(item.isA());
    checkBox.addValueChangeListener(event -> item.setA(event.getValue()); // inside setA() method you need to set isB and isC to false if the new value is true. No good!
    return checkBox;
});
grid.addComponentColumn((item) -> {
    CheckBox checkBox = new CheckBox();
    checkBox.setValue(item.isB());
    checkBox.addValueChangeListener(event -> item.setB(event.getValue()); // inside setB() method you need to set isB and isC to false if the new value is true. No good!
    return checkBox;
});
grid.addComponentColumn((item) -> {
    CheckBox checkBox = new CheckBox();
    checkBox.setValue(item.isC());
    checkBox.addValueChangeListener(event -> item.setC(event.getValue()); // inside setC() method you need to set isB and isA to false if the new value is true. No good!
    return checkBox;
});

И вот как это будет выглядеть после моих изменений 

public class Foo {
    private AbcEnum abcEnum = null;

    // constructor, getters, setters 
}

public Enum AbcEnum {
    A,
    B,
    C;
}

// how the columns are added (without editor):
Grid<Foo> grid = new Grid<>();
grid.addComponentColumn((item) -> {
    ComboBox<AbcEnum> comboBox = new ComboBox<>();
    comboBox.setValue(item.getAbcEnum());
    comboBox.addValueChangeListener(event -> item.setAbcEnum(item.getValue()));
    return comboBox;
});

Я написал "без редактора" вкомментарии о добавлении столбца, потому что этот код добавит ComboBox / CheckBox в качестве интерактивных и функциональных компонентов для каждого элемента сетки, без необходимости открывать редактор для элемента, чтобы изменить значения. Если вы действительно используете editor , вы можете добавить эти функциональные входные данные в качестве editorComponents (и связать их с binder-редактором вместо использования setValue и addValueChangeListener) и показать только текущее значение в обычных столбцах (недоступно для редактирования - поэтому не требуется ввод данных, таких как CheckBox или ComboBox)

...