在Vaadin Flow 14中过滤网格中项目的简单示例 [英] Simple example of filtering items in a grid in Vaadin Flow 14
问题描述
我想禁止Vaadin Flow 14中Grid小部件中某些项目的显示.
I want to suppress the display of some items in a Grid widget in Vaadin Flow 14.
例如，如果用户在IntegerField小部件中输入年份，则我希望网格仅显示具有该年份之前相关日期的项目.日期在该日期或之后的项目应消失.如果用户更改了年份，则应重新应用过滤，并在网格中适当显示更少或更多的项目.
For example, if the user enters a year in a IntegerField widget, I want the grid to show only items with an associated date before that year. Items with a date on or after that date should disappear. If the user changes the year number, the filtering should be re-applied with fewer or more items displayed appropriately in the grid.
我看过讨论过的Grid上的过滤器，但无法将头部包裹在各个运动部件上.也许有人可以举一个简单的例子?
I have seen filters on Grid discussed but cannot wrap my head around the various moving parts. Perhaps someone could show a simple example?
推荐答案
过滤网格非常简单，一旦掌握了窍门，就很容易.
Filtering grids is quite slick, and fairly easy once you get the hang of it.
首先，请了解 Grid 对象实际上并未过滤. DataProvider 支持Grid被过滤. Grid自动更新其自己的显示，以将更改与数据提供者相匹配.
First, understand that the Grid object is not actually filtered. The DataProvider backing the Grid is filtered. The Grid automatically updates its own display to match changes to the data provider.
下面是一个完整的示例应用程序.第一次出现时，我们在Grid小部件中看到四个项目.这些项目只是 java.time.LocalDate 对象.
Below is an entire example app. When it first appears, we see four items it the Grid widget. These items are simply java.time.LocalDate objects.
当用户在IntegerField中输入年份时，我们将过滤器应用于
When the user enters a year number in the IntegerField, we apply a filter to the ListDataProvider object backing our grid. If the user clears the year number from that IntegerField, we clear all filters from our data provider.
设置和清除过滤器立即. >或addFilter.但是，不，Grid会自动更新其显示-我不需要任何其他代码.定义为过滤器一部分的谓词测试将自动应用于
Setting and clearing the filter(s) takes effect immediately. This point threw me, with me thinking that I must somehow "apply" the filters after calling setFilter or addFilter. But, no, the Grid automatically updates its display — with no further code on my part. The predicate test defined as part of your filter is automatically applied to each item in the ListDataProvider object’s data set. Those items that pass the test are displayed, while items that fail the test are suppressed from display.
The setting and clearing of filters is done in a value-change listener on the IntegerField widget. When a user enters a number (and leaves the field, such as by pressing Tab or Return), our listener object automatically is called, with an event object passed. Notice that we test for a null being retrieved from the IntegerField. A null means the user cleared the existing entry, leaving the field blank.
在哪里定义我们的ListDataProvider对象以支持我们的Grid对象?当我们传递 List . html#setItems-java.util.Collection-"rel =" nofollow noreferrer> Grid::setItems 方法.
Where did we define our ListDataProvider object to back our Grid object? That data provider was instantiated automatically for us when we passed a List to the Grid::setItems method.
顺便说一句，您可以让Grid使用JavaBeans样式的命名约定(getter/setter方法)自动显示列.但是在此示例中，我们在此显式定义了列，它们的值是通过调用我们传递的LocalDate ::方法引用而生成的.
By the way, you can have a Grid automatically display columns using the JavaBeans-style naming conventions (getter/setter methods). But here in this example we defined our columns explicitly, their values generated by calling the LocalDate :: method references we pass.
package work.basil.example;
import com.vaadin.flow.component.AbstractField;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.IntegerField;
import com.vaadin.flow.data.provider.ListDataProvider;
import com.vaadin.flow.router.Route;
import java.time.LocalDate;
import java.time.Month;
import java.util.ArrayList;
import java.util.List;
import java.util.Objects;
/**
* The main view contains a button and a click listener.
*/
@Route ( "" )
//@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{
private Grid < LocalDate > grid;
private IntegerField yearField;
public MainView ( )
{
yearField = new IntegerField( "Filter years before: " );
yearField.addValueChangeListener(
( AbstractField.ComponentValueChangeEvent < IntegerField, Integer > event ) -> {
Integer year = event.getValue();
// If the user cleared the field, its value is null. In such a case, clear all filters.
// If the user entered a year number into this field, specify a filter.
if ( Objects.isNull( year ) )
{
( ( ListDataProvider < LocalDate > ) grid.getDataProvider() ).clearFilters();
} else
{
( ( ListDataProvider < LocalDate > ) grid.getDataProvider() ).setFilter( ( LocalDate localDate ) -> localDate.getYear() < year );
}
}
);
grid = new Grid <>();
List < LocalDate > dates = List.of(
LocalDate.of( 2020 , Month.JANUARY , 23 ) ,
LocalDate.of( 2019 , Month.FEBRUARY , 24 ) ,
LocalDate.of( 2022 , Month.MARCH , 25 ) ,
LocalDate.of( 2011 , Month.APRIL , 26 )
);
grid.setItems( new ArrayList < LocalDate >( dates ) );
grid.addColumn( LocalDate :: toString );
grid.addColumn( LocalDate :: getYear );
grid.addColumn( LocalDate :: getDayOfWeek );
this.add( yearField , grid );
}
}
您可以通过调用addFilter而不是setFilter来安装多个过滤器.谓词有效地组合为AND(而非OR).因此，所有谓词测试都必须通过才能显示项目.调用clearFilters删除所有过滤器.调用setFilter会清除所有现有过滤器并安装一个过滤器.
You can install multiple filters by calling addFilter instead of setFilter. The predicates are effective combined as AND rather than as OR. So all the predicate tests must pass for an item to be displayed. Call clearFilters to remove any filters. Calling setFilter clears any existing filters and installs a single filter.
这篇关于在Vaadin Flow 14中过滤网格中项目的简单示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
