Vaadin 14 Grid横向滚动条自动定位至排序列问题求解决方案

这个问题是Vaadin 14 Grid的内置行为——当Grid重新获得焦点时，框架会自动将当前设置了排序的列滚动到视图中心。以下是两种可行的解决思路：

客户端JavaScript扩展方案 #

通过自定义客户端扩展覆盖Grid的焦点处理逻辑，阻止默认的滚动行为：

1. 创建一个JavaScript文件（比如custom-grid-focus.js），内容如下：

window.customGridFocus = function(gridElement) {
    gridElement.addEventListener('focus', function(e) {
        // 阻止默认的聚焦滚动行为
        e.stopImmediatePropagation();
        // 保持Grid的焦点状态，同时禁止自动滚动
        gridElement.focus({ preventScroll: true });
    }, true);
};

2. 在Vaadin视图中加载并应用这个脚本：

@JsModule("./custom-grid-focus.js")
public class YourGridView extends VerticalLayout {
    public YourGridView() {
        Grid<YourEntity> grid = new Grid<>(YourEntity.class);
        // 初始化Grid列和排序逻辑...
        
        // 客户端调用脚本绑定焦点事件
        grid.getElement().executeJs("window.customGridFocus($0)", grid.getElement());
        add(grid);
    }
}

服务端滚动位置恢复方案 #

通过监听Grid的焦点事件，记录失焦时的横向滚动位置，聚焦时强制恢复：

Grid<YourEntity> grid = new Grid<>(YourEntity.class);
// 初始化列及排序配置...

// 保存横向滚动位置的变量
AtomicInteger scrollLeft = new AtomicInteger(0);

// 失焦时记录当前滚动位置
grid.addBlurListener(event -> {
    scrollLeft.set(grid.getElement().getProperty("scrollLeft", 0));
});

// 聚焦时恢复滚动位置
grid.addFocusListener(event -> {
    grid.getElement().executeJs("$0.scrollLeft = $1", grid.getElement(), scrollLeft.get());
});

注意：服务端方案可能存在微小的前后端通信延迟，如果对交互体验要求较高，优先选择客户端方案。

内容的提问来源于stack exchange，提问作者Łukasz Kwaśniak