Vaadin 23中如何获取Grid列顺序以保存用户自定义配置？

首先明确版本问题：Vaadin 14中Grid列顺序API无法正确返回用户拖拽调整后顺序的bug，在Vaadin 23版本已经完全修复，官方已经提供了稳定的公开API实现列顺序的读取和设置，不需要再使用反射、劫持客户端状态这类hack方案。

可用核心API #

Vaadin 23的Grid针对列排序场景提供了两个开箱即用的方法：

• grid.getColumnOrder()：实时返回当前Grid实际展示的列顺序集合，不管是初始配置的顺序，还是用户拖拽列头调整后的顺序，返回结果都和页面展示完全一致，不存在14版本中只能获取初始列顺序的问题。
• grid.setColumnOrder(List<Grid.Column<T>> columns)：直接传入列集合即可设置Grid的列展示顺序，页面加载时调用可以直接恢复用户之前保存的自定义排序。

具体实现步骤 #

1. 监听列重排事件，持久化配置 #

用户拖拽调整列顺序后会触发内置的重排事件，直接在事件回调里保存最新的列顺序即可，不需要额外绑定客户端事件：

// 所有列定义完成后，给Grid绑定重排监听
grid.addColumnReorderListener(event -> {
    // 只需要存每个列的唯一key即可，不需要持久化整个列对象
    List<String> columnKeyOrder = event.getColumns()
            .stream()
            .map(Grid.Column::getKey)
            .filter(Objects::nonNull)
            .toList();
    // 替换为实际的持久化逻辑：可存入用户后端配置表、当前会话、浏览器LocalStorage
    userPreferenceService.saveColumnOrder(
        grid.getId().orElseThrow(() -> new IllegalArgumentException("Grid必须设置唯一ID")),
        columnKeyOrder
    );
});

注意：所有需要参与排序持久化的列，必须提前调用column.setKey("唯一标识")设置全局不重复的key，不要用表头文案作为匹配依据，多语言场景下会出现匹配失败的问题。

2. 页面初始化时恢复用户配置 #

Grid所有列添加完成后，读取之前存储的列key配置，匹配到对应列对象后恢复顺序即可：

// 所有列初始化完成后执行恢复逻辑
List<String> savedOrderKeys = userPreferenceService.getColumnOrder(grid.getId().get());
if (savedOrderKeys != null && !savedOrderKeys.isEmpty()) {
    List<Grid.Column<YourBean>> orderedColumns = savedOrderKeys.stream()
            .map(grid::getColumnByKey)
            .filter(Objects::nonNull)
            .toList();
    // 校验列数量是否匹配，避免后续版本迭代增删列导致旧配置失效
    if (orderedColumns.size() == grid.getColumns().size()) {
        grid.setColumnOrder(orderedColumns);
    }
}

补充说明 #

• 如果同时做了列显示/隐藏的自定义功能，可以在重排事件里同步把每个列的isVisible()状态一起存储，恢复时同步设置可见状态即可，逻辑和列顺序持久化完全一致。
• 不需要后端存储的场景，可以直接调用UI.getCurrent().getPage().executeJs()操作浏览器LocalStorage读写配置，不需要单独编写前端代码。
• Vaadin14时期流传的各类反射读取客户端列状态的方案不要在23版本使用，Grid内部类结构已经调整，这类hack方法会直接报错，直接使用官方公开API即可。

内容的提问来源于stack exchange，提问作者Jennifer Nam