Vaadin（Java）中在Grid外创建筛选组件的实现示例请求

下面是不使用GridCellFilter组件，通过TextField和ComboBox实现Grid多条件筛选的完整示例，适合Vaadin新手参考：

1. 定义实体类 #

先创建一个演示用的实体类，包含需要筛选的字段：

public class User {
    private Long id;
    private String name;
    private String department;

    public User(Long id, String name, String department) {
        this.id = id;
        this.name = name;
        this.department = department;
    }

    // Vaadin需要Getter方法来获取字段值
    public Long getId() { return id; }
    public String getName() { return name; }
    public String getDepartment() { return department; }
}

2. 主视图完整实现 #

整合Grid、筛选输入框和下拉框，核心通过ListDataProvider实现内存筛选逻辑：

import com.vaadin.flow.component.grid.Grid;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.component.combobox.ComboBox;
import com.vaadin.flow.data.provider.ListDataProvider;
import com.vaadin.flow.router.Route;
import java.util.ArrayList;
import java.util.List;
import java.util.Objects;
import java.util.function.Predicate;

@Route("user-grid-filter")
public class UserGridFilterView extends VerticalLayout {

    public UserGridFilterView() {
        // 配置Grid列
        Grid<User> userGrid = new Grid<>(User.class);
        userGrid.setColumns("id", "name", "department");
        userGrid.setWidthFull();

        // 创建筛选组件
        TextField nameFilter = new TextField("姓名筛选");
        nameFilter.setPlaceholder("输入姓名关键词");
        
        ComboBox<String> departmentFilter = new ComboBox<>("部门筛选");
        departmentFilter.setPlaceholder("选择部门");
        departmentFilter.setItems("技术部", "市场部", "人事部", "财务部");

        // 组装筛选栏布局
        HorizontalLayout filterBar = new HorizontalLayout(nameFilter, departmentFilter);
        filterBar.setWidthFull();
        filterBar.setSpacing(true);
        filterBar.setPadding(true);

        // 准备测试数据
        List<User> userList = new ArrayList<>();
        userList.add(new User(1L, "张三", "技术部"));
        userList.add(new User(2L, "李四", "市场部"));
        userList.add(new User(3L, "王五", "技术部"));
        userList.add(new User(4L, "赵六", "人事部"));
        userList.add(new User(5L, "钱七", "财务部"));
        userList.add(new User(6L, "张小明", "技术部"));

        // 绑定数据提供器
        ListDataProvider<User> dataProvider = new ListDataProvider<>(userList);
        userGrid.setDataProvider(dataProvider);

        // 绑定筛选事件
        nameFilter.addValueChangeListener(event -> updateFilter(dataProvider, nameFilter.getValue(), departmentFilter.getValue()));
        departmentFilter.addValueChangeListener(event -> updateFilter(dataProvider, nameFilter.getValue(), departmentFilter.getValue()));

        // 添加组件到视图
        add(filterBar, userGrid);
        setSizeFull();
    }

    // 核心筛选方法：组合多条件
    private void updateFilter(ListDataProvider<User> dataProvider, String nameKeyword, String selectedDepartment) {
        // 姓名筛选逻辑：空输入则不限制
        Predicate<User> namePredicate = user -> {
            if (nameKeyword == null || nameKeyword.trim().isEmpty()) {
                return true;
            }
            return user.getName().toLowerCase().contains(nameKeyword.trim().toLowerCase());
        };

        // 部门筛选逻辑：未选择则不限制
        Predicate<User> departmentPredicate = user -> {
            if (selectedDepartment == null) {
                return true;
            }
            return Objects.equals(user.getDepartment(), selectedDepartment);
        };

        // 组合两个条件（同时满足），可根据需求改为or()满足任一条件
        dataProvider.setFilter(namePredicate.and(departmentPredicate));
    }
}

关键细节说明 #

• 数据提供器选择：ListDataProvider适合内存小数据集；如果是大数据量，建议改用CallbackDataProvider在后端实现筛选，避免前端加载过多数据。
• 空值兼容：输入框为空或下拉框未选择时，对应筛选条件自动失效，不影响其他条件的筛选逻辑。
• 事件触发：两个筛选组件的valueChangeEvent都会触发筛选更新，支持单独或同时操作的场景。

内容的提问来源于stack exchange，提问作者cave lupum