Vaadin Flow множественный выбор комбобокс - PullRequest
Новая
       10

Vaadin Flow множественный выбор комбобокс

0 голосов
/ 23 января 2019

Мне нужно отобразить комбинированный список множественного выбора в строке заголовка сетки для фильтрации записей сетки.

Ответы [ 3 ]

0 голосов
/ 18 февраля 2019

Я интегрировал существующий Полимерный компонент в поток Ваадина: 

@Tag("multiselect-combo-box")
@HtmlImport("src/views/common/multiselect-combo-box.html")
public class MultiSelectComboBox extends AbstractCallableComponent {

    private List<String> value;

    public void setItems(List<String> items) {
        JsonArray arr = Json.createArray();

        items.forEach(item -> {
            arr.set(arr.length(), item);
        });
        getElement().setPropertyJson("items", arr);
    }

    @ClientCallable
    @Override
    public void onValueChange(String s) {
        if (s.length() == 0) {
            value = Collections.emptyList();
        } else {
            value = Arrays.stream(s.split(","))
                    .map(String::trim)
                    .collect(Collectors.toList());
        }
        fireEvent(new ChangeEvent(this, false));
    }

    @Override
    public List<String> getValue() {
        return value;
    }

    public Registration addChangeListener(ComponentEventListener<ChangeEvent> listener) {
        return addListener(ChangeEvent.class, listener);
    }
}

и 

public class ChangeEvent extends ComponentEvent<AbstractCallableComponent> {

    public ChangeEvent(AbstractCallableComponent source, boolean fromClient) {
        super(source, fromClient);
    }
}
0 голосов
/ 14 марта 2019

В настоящее время не существует официального компонента множественного выбора для Vaadin Flow.

Однако вы можете использовать интеграцию Java веб-компонента multiselect-combo-box для Vaadin Flow . Вы можете увидеть живую демонстрацию компонента здесь .

Чтобы использовать компонент, сначала добавьте в ваш файл pom.xml зависимость (проверьте, какая версия является последней, и измените ее соответствующим образом): 

    <dependency>
     <groupId>org.vaadin.gatanaso</groupId>
     <artifactId>multiselect-combo-box-flow</artifactId>
     <version>0.0.4</version>
    </dependency>

    <repository>
     <id>vaadin-addons</id>
     <url>http://maven.vaadin.com/vaadin-addons</url>
    </repository>

Затем создайте экземпляр компонента и заполните его элементами: 

MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();
multiselectComboBox.setLabel("Select items");
multiselectComboBox.setItems("Item 1", "Item 2", "Item 3", "Item 4");

При желании добавьте прослушиватель изменения значения, чтобы получать уведомления при изменении выбора: 

multiselectComboBox.addValueChangeListener(e -> {
   // get the currently selected items
   Set<String> selectedItems = multiselectComboBox.getValue();
});

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

// setup grid with data provider
List<Person> personList = getItems();
Grid<Person> grid = new Grid<>();

ListDataProvider<Person> dataProvider = new ListDataProvider<>(personList);
grid.setDataProvider(dataProvider);

// add a column
Grid.Column<Person> firstNameColumn = grid.addColumn(Person::getfirstName).setHeader("Name");

HeaderRow filterRow = grid.appendHeaderRow();

// define the multiselect combo box
MultiselectComboBox<String> multiselectComboBox = new MultiselectComboBox();

// set items to list of names
multiselectComboBox.setItems("Jack", "Nathan", "Andrew", "Peter", "Samuel");

// add a value change listener
multiselectComboBox.addValueChangeListener(e -> {
  // get the currently selected items
  Set<String> selectedItems = multiselectComboBox.getValue();
  String names = selectedItems.stream().collect(Collectors.joining(","));

  // filter the grid data provider
  if (selectedItems.size() > 0) {
    dataProvider.addFilter(person -> StringUtils.containsIgnoreCase(person.getfirstName(), names));
  } else {
    dataProvider.clearFilters();
  }
});

// set the component as a filter
filterRow.getCell(firstNameColumn).setComponent(multiselectComboBox);

Надеюсь, это поможет вам достичь вашей цели!

BR

Goran

0 голосов
/ 23 января 2019

Об этом в течение долгого времени была открытая проблема github.

Кто-то уже сделал для него полимерный компонент, но еще не интегрировал его в Vaadin Flow. Мне кажется, что это, наконец, снимается, и я ожидаю, что в Vaadin Flow скоро появится комбинированный ящик.

...