随笔 - 120  文章 - 0  评论 - 27  阅读 - 80816

滚动TreeView滚动条到被选中节点

选择TreeView节点,页面回送刷新后,滚动条自动回到TreeView顶部,而不是被选中节点处,使节点在Treeview可视区域可见,可以利用scrollIntoView方法使TreeView中页面刷新后自动定位到被选择节点处,使被选择节点可见,方法如下:

<!--Treeview定义页面-->
<body onload="ScrollToSelectNode();">
    。。。。。。
    <div id="divScroll" style="overflow-y:auto;overflow-x:auto;WIDTH: 250px;height:400px;">
        <asp:TreeView ID="tvAssetKind" runat="server" Width="100%" ExpandDepth="1">
        </asp:TreeView>
    </div>
    。。。。。。
</body>

<!--JS处理方法-->
<script language="javascript" type="text/javascript">          
    //滚动到选择节点
    function ScrollToSelectNode()
    {
        try
        {
            var elem = document.getElementById('tvAssetKind_SelectedNode');
            if(elem != null )
            {
                var node = document.getElementById(elem.value);
                if(node != null)
                {
                    
//滚动被选择节点到TreeView顶部
                    node.scrollIntoView();
                    
                    
//使被选择节点距离TreeView顶部10,使被选择节点可见
                    document.getElementById("divScroll").scrollLeft = 0;
                    document.getElementById("divScroll").scrollTop -= 10;
                }
            }
        }
        catch(oException)
        {
        }
    }        
</script>

scrollTop、scrollLeft、scrollWidth、scrollHeight

编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义

点击右上角即可分享
微信分享提示