Vaadin 23 Grid如何在不调用后端API的情况下实现前端排序？

问题核心是你当前使用的是后端数据提供器（BackendDataProvider），这类数据提供器的设计逻辑就是：任何排序、分页、过滤操作都会触发fetchFromBackEnd方法调用后端接口。要实现纯前端排序，需要切换到基于本地数据的数据源。

解决思路 #

1. 一次性加载所有需要展示的数据到前端内存中
2. 使用ListDataProvider作为Grid的数据源（该数据提供器会在本地处理排序、过滤操作）
3. 保持列的排序配置（setSortable(true)和setComparator()），ListDataProvider会自动使用这些配置在本地完成排序

代码改造示例 #

调整Grid组件实现 #

public class MyGridComponent extends Grid<MyWrapper> {

    public MyGridComponent(MyService myService) {
        super(MyWrapper.class, false);

        // 一次性获取全部数据并转换为包装类列表（仅初始化时调用一次后端）
        MyFilter initFilter = MyFilter.builder().build();
        List<MyWrapper> fullDataList = myService.getData(initFilter)
                .stream()
                .map(MyClassWrapper::new)
                .collect(Collectors.toList());

        // 使用ListDataProvider作为数据源，所有排序操作将在本地执行
        ListDataProvider<MyWrapper> localDataProvider = new ListDataProvider<>(fullDataList);
        setDataProvider(localDataProvider);

        // 列的排序配置保持不变
        addColumn(MyWrapper::getName)
                .setHeader("Column1")
                .setSortable(true)
                .setComparator(MyWrapper::getColumn1)
                .setId("my-grid-column-name");
    }
}

关键说明 #

• 替换后端数据提供器为ListDataProvider后，Grid的排序操作会直接操作前端内存中的数据列表，不会触发任何后端API调用
• 如果后续需要更新数据（比如刷新列表），只需修改ListDataProvider中的数据集合，再调用localDataProvider.refreshAll()即可，全程无需后端交互

内容的提问来源于stack exchange，提问作者Sankalp Bhatt