Question

我需要在网格标题行中显示多个选择组合框以过滤网格记录。

Answer 1

我已将现有Polymer component集成到Vaadin流中：

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

Answer 2

目前没有官方的Vaadin Flow多选组件。

但是，您可以将multiselect-combo-box Web组件的Java集成用于Vaadin Flow。您可以查看组件here的实时演示。

要使用该组件，首先将依赖项添加到您的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();
});

要将这个组件用作网格过滤器，我修改了Vaadin网格documentation中的示例，其工作方式如下：

// 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

Answer 3

有一个开放的github issue about this时间已久。

有人已经为其制造了聚合物成分，但尚未将其整合到Vaadin Flow中。在我看来，这终于可以实现了，我希望Vaadin Flow中的多选组合框会很快出现。

Answer 4

默认情况下不可用，但 Vaadin 团队通过 Vaadin ComponentFactory 发布了 Multicombobox Component，对于想要/需要长期支持组件的人来说，这应该是最佳选择。

要将其添加到 maven 项目，您需要添加 vaadin 存储库：

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

和依赖：

<dependency>
   <groupId>com.vaadin.componentfactory</groupId>
   <artifactId>multi-combo-box-flow</artifactId>
   <version>0.4.0</version>
</dependency>

到项目 pom.xml 文件。

Vaadin流多选组合框

4 个答案: