渲染 ZK 后的网格滚动答案

【问题标题】：Grid scrolling after render ZK渲染 ZK 后的网格滚动
【发布时间】：2012-08-31 18:12:01
【问题描述】：

在设置模型后，我正在尝试向下滚动到网格底部。

1）我设置模型：

myGrid.setModel(new ListModelList<Object>(myList));

2) 我覆盖了行渲染器

myGrid.setRowRenderer(new RowRenderer<Object>() {
        @Override
        public synchronized void render(Row row,final Object data, int index) throws Exception {                    
            row.setStyle("commonCellPadding");
                            .
                            .
                            .

            row.appendChild(htmlMessage);
        }           
    });

3) 最后，如果用于设置模型的列表太大（.zul 中的网格具有固定高度），我想显示最后的结果（在这种情况下是最近的结果）。我需要在渲染后自动向下滚动。我该怎么做？

我尝试过的事情

a) 在渲染后调用 javascript 函数，这不起作用，因为 gridEle.scrollHeight 属性返回在 zul 中设置的网格的固定高度（如果不是，则返回 0）而不是网格的高度模型设置好之后。

myGrid.addEventListener(ZulEvents.ON_AFTER_RENDER, new EventListener<Event>() {
        public void onEvent(Event event) throws Exception
        {

            Clients.evalJavaScript("var gridEle = document.getElementById('"+myGrid.getUuid()+"-body"+"'); gridEle.scrollTop = gridEle.scrollHeight;alert(gridEle.scrollHeight);");             
        }
    });

【问题讨论】：

你尝试过我提出的建议吗？
我试过了，但我没有成功，可能是按需渲染，有时间我会继续研究。

标签： grid zk

【解决方案1】：

为什么不先对 myList 进行降序排序，让最后一行成为第一行，而不是控制滚动条？
在我看来，它会更容易并且更符合用户体验。

【讨论】：

该代码用于网络聊天，通常最后接收或发送的消息显示在窗口底部。如果聊天有历史记录（已经开始有消息），我希望窗口滚动到底部以显示对话中的最后一条消息。

【解决方案2】：

只需在设置模型和行渲染器后调用Clients.scrollIntoView(rows.getLastChild());（前提是rows 是行组件ID，并且已经自动连接到您的控制器中）。在 zkfiddle here 和 source 上查看现场演示

更新：如果您使用Render-On-Demand 功能，Clients.scrollIntoView(Component) 将不起作用，因为如果您要滚动到的行自然不会在初始页面加载时加载。

【讨论】：