如何在 Vaadin 8 中添加网格过滤器?
How to add grid filters in Vaadin 8?
Vaadin 8 刚出来。在 Grid 中添加过滤器从来没有出现在他们的文档中,我只在 Whosebug 中找到了一个可行的解决方案 here。
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 的代码?
有Vaadin grid addon,稍后会移植到Vaadin 8,所以如果你有时间等待它,你可以在漂亮的包中获得过滤器行。
https://vaadin.com/directory#!addon/gridutil
请在此处阅读 GridUtil 作者对工作量的估计。
https://github.com/melistik/vaadin-grid-util/issues/37#issuecomment-282756130
可以为 Vaadin 8 Grid 添加过滤。
假设我们已将 Person 模型定义为:
final class Person {
private String name;
public Person(String name) {
this.name = name;
}
public String getName() {
return name;
}
}
我们的 Grid 实现看起来像这样:
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());
}
}
结果如下图:
空输入结果为:foo, bar and foobar.
对于 foo 结果是:foo 和 foobar.
对于 bar 结果是:bar 和 foobar.
对于 foobar 结果是:foobar.
Vaadin 8 刚出来。在 Grid 中添加过滤器从来没有出现在他们的文档中,我只在 Whosebug 中找到了一个可行的解决方案 here。
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 的代码?
有Vaadin grid addon,稍后会移植到Vaadin 8,所以如果你有时间等待它,你可以在漂亮的包中获得过滤器行。
https://vaadin.com/directory#!addon/gridutil
请在此处阅读 GridUtil 作者对工作量的估计。
https://github.com/melistik/vaadin-grid-util/issues/37#issuecomment-282756130
可以为 Vaadin 8 Grid 添加过滤。
假设我们已将 Person 模型定义为:
final class Person {
private String name;
public Person(String name) {
this.name = name;
}
public String getName() {
return name;
}
}
我们的 Grid 实现看起来像这样:
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());
}
}
结果如下图:
空输入结果为:foo, bar and foobar.
对于 foo 结果是:foo 和 foobar.
对于 bar 结果是:bar 和 foobar.
对于 foobar 结果是:foobar.