时间戳

首页 > 解决方案 > 使用@UIScope 导航回视图时，Vaadin 19.0.6 网格项详细信息卡住

vaadin - 使用@UIScope 导航回视图时，Vaadin 19.0.6 网格项详细信息卡住

问题描述

我有一个带有单选网格的视图，它具有自定义项目详细信息渲染器。View 有 @UIScope 注释。

细节打开\关闭存在问题。要重现它，您必须离开视图然后返回到它（无论如何。使用浏览器后退按钮或使用 vaadin 路由器导航）。

第一种情况是 setDetailsVisibleOnClick(true) ，那么您最终可能会打开或关闭详细信息。例如，当我第一次返回时，详细信息已打开。然后我重复从视图导航和返回视图，这次详细信息已关闭。

第二种情况，我有 setDetailsVisibleOnClick(false) 并使用 setDetailsVisible 为该项目实现单击侦听器。我也在 onAttach 方法中设置 selectedItem 变量添加然后 select(selectedItem) 和 setDetailsVisible(selectedItem,true) 。现在，当我返回查看该项目时，该项目已被选中并打开了详细信息。但是，当我选择其他项目时，记住的项目详细信息保持打开状态。实际上，对于 setDetailsVisibleOnClick(true) 的第一种情况也是如此。如果您返回查看并打开详细信息，则在您单击其他网格项目后它们保持打开状态。

   @Override
    public void onAttach(AttachEvent event) {
        //https://github.com/vaadin/vaadin-grid/issues/1850
        setDetailsVisibleOnClick(true);
        setDetailsVisibleOnClick(false);
        if (selectedItem != null) {
            select(selectedItem);
            if (detailsRenderer != null) setDetailsVisible(selectedItem, true);
            scrollToIndex(dataProvider.getItems().indexOf(selectedItem));
        }
    }

和 SingleSelectionListener

event -> {
            var item = event.getSelectedItem().orElse(null);
            if (detailsRenderer != null) {
                var oldVal = event.getOldValue();
                if (selectedItem != null) setDetailsVisible(selectedItem, false);
                if (oldVal != null) setDetailsVisible(oldVal, false);
                if (item != null) setDetailsVisible(item, true);
                getElement().executeJs("this.notifyResize()");//preserve rows heights on grid container resize
            }
            selectedItem = event.getSelectedItem().orElse(null);
        }

标签： vaadinvaadin-flow

解决方案

我设法像这样解决它。在我的 Grid 扩展类中：

    public void restoreSavedSelection() {
        var items = dataProvider.getItems();
        if (selectedItem != null && !items.isEmpty() && items.contains(selectedItem)) {
            var index = items.indexOf(selectedItem);//workaround
            select(items.get(index));
            scrollToIndex(index);
        }
    }

    @Override
    public void scrollToIndex(int rowIndex) {
        getElement().executeJs("setTimeout(function() { $0.scrollToIndex($1) })", getElement(), rowIndex);
    }

推荐阅读