如何在Vaadin 8中添加网格过滤器?

16

Vaadin 8 刚刚发布。在他们的文档中并没有提供在 Grid 中添加过滤器的方法,我只在 stackoverflow 上找到了这个可行的解决方案

  HeaderCell cell = filterRow.getCell(pid);
                    // Have an input field to use for filter
                    TextField filterField = new TextField();
                    filterField.setColumns(0);
                    filterField.setHeight("23");



                    // Update filter When the filter input is changed
                    filterField.addTextChangeListener(change -> {
                        // Can't modify filters so need to replace
                        b.removeContainerFilters(pid);

                        // (Re)create the filter if necessary
                        if (! change.getText().isEmpty())
                            b.addContainerFilter(
                                new SimpleStringFilter(pid,
                                    change.getText(), true, false));
                    });
                    cell.setComponent(filterField);

但是,自从更新之后,由于新网格中不再提供SimpleStringFilter,因此这个解决方案不再起作用。而且BeanItemContainer也不再被识别,只允许使用setItems()来填充网格数据。

有谁能帮我更新这段代码以适应Vaadin 8?


@Patryk Krawczyk的解决方案适用于一列过滤器,但当我有像FirstName和LastName这样的两列时,它不起作用。有人有解决办法吗? - sulox32
2个回答

15

在Vaadin 8 Grid中可以添加筛选功能。

假设我们已经定义了Person模型:

final class Person {

    private String name;

    public Person(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

}

我们的网格实现看起来像这样:

final class PersonGrid extends Grid<Person> {

    public PersonGrid() {
        List<Person> persons = new ArrayList<>();
        persons.add(new Person("foo"));
        persons.add(new Person("bar"));
        persons.add(new Person("foobar"));

        addColumn(Person::getName).setCaption("Name");

        setItems(persons);
    }

}

现在,我们可以创建一个带有TextField的布局,这将成为我们的过滤器:

final class FilteredGridLayout extends VerticalLayout {

    private final PersonGrid personGrid;
    private final TextField nameFilter;

    public FilteredGridLayout() {
        nameFilter = new TextField();
        nameFilter.setPlaceholder("Name...");
        nameFilter.addValueChangeListener(this::onNameFilterTextChange);
        addComponent(nameFilter);

        personGrid = new PersonGrid();
        addComponentsAndExpand(personGrid);
    }

    private void onNameFilterTextChange(HasValue.ValueChangeEvent<String> event) {
        ListDataProvider<Person> dataProvider = (ListDataProvider<Person>) personGrid.getDataProvider();
        dataProvider.setFilter(Person::getName, s -> caseInsensitiveContains(s, event.getValue()));
    }

    private Boolean caseInsensitiveContains(String where, String what) {
        return where.toLowerCase().contains(what.toLowerCase());
    }

}
以下是结果展示: 使用 Vaadin 8 Grid 进行过滤 对于空输入,结果为:foobarfoobar
对于foo,结果为:foofoobar。
对于bar,结果为:bar 和 foobar
对于foobar,结果为:foobar

1
谢谢,这是我在搜索了很久后找到的最好的关于过滤的解释。非常感谢。 - Stephane Grenier
但它只适用于一个字段。如果您在其他列上添加相同的过滤器,它将无法工作。 - zond

5

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接