Vaadin 流多选组合框

Question

我需要在我的网格 header 行中显示多选组合框以过滤网格记录。

Answer 1

有人已经为它制作了聚合物组件，但尚未将其集成到 Vaadin Flow 中。在我看来，这终于开始了，我期待很快在 Vaadin Flow 中出现多选组合框。

Answer 2

我已将现有 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 3

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

但是，您可以使用 multiselect-combo-box web component for Vaadin Flow. You can see the live demo of the component here 的 Java 集成。

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

戈兰

Answer 4

默认情况下不可用，但 Vaadin 团队通过 Vaadin ComponentFactory released Multicombobox Component 这应该是 wants/needs 长期支持组件的人的最佳选择。

要将其添加到 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 流多选组合框

Vaadin flow multiple selection combobox

java

vaadin