TreeView节点定位

最新推荐文章于 2024-06-05 09:54:28 发布

转载最新推荐文章于 2024-06-05 09:54:28 发布 · 3.9k 阅读

文章标签：

#javascript #null #function #div #server #asp

本文介绍了一种解决TreeView页面刷新后，所选节点不在可视区域内的问题的方法。通过使用scrollIntoView方法，确保了页面刷新后，所选节点能够出现在可视范围内。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

scrollTop、scrollLeft、scrollWidth、scrollHeight

scrollTop 是“卷”起来的高度值，示例：

由于为外层元素 p 设置了 scrollTop，所以内层元素会向上卷。
scrollLeft 也是类似道理。
我们已经知道 offsetHeight 是自身元素的宽度。
而 scrollHeight 是内部元素的绝对宽度，包含内部元素的隐藏的部分。
上述中 p 的 scrollHeight 为 300，而 p 的 offsetHeight 为 100。
scrollWidth 也是类似道理。

<!--



Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



--><div style="width:100px;height:100px;background-color:#FF0000;overflow:hidden;" id="p">

    <div style="width:50px;height:300px;background-color:#0000FF;" id="t">

        如果为 p 设置了 scrollTop，这些内容可能不会完全显示。

    </div>

</div>



<script type="text/javascript">

    var p = document.getElementById("p");

    p.scrollTop = 10;

</script>

<!--



Code highlighting produced by Actipro CodeHighlighter (freeware)

http://www.CodeHighlighter.com/



--><!--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>