ASP.Net TreeView将所选节点滚动到视图中

我想出来了。TreeView控件在客户端上创建一个javascript对象。它被命名为任何你称之为树视图的名称,并附加了一个“_Data”。通过该对象,可以获取对选定节点的引用。

下面的代码使用ASP.NETAjax扩展。记住把TreeView的名字改成你自己的名字。

var name = myTreeView_Data.selectedNodeID.value;
var selectedNode = $get(name);

if(selectedNode)
{ 
selectedNode.scrollIntoView(true);
}

这里是treeview的解决方案,当点击到特定的树节点时,它只需滚动到页面的关注标题(不重新定向),为此我们有简单的HTML代码,现在我们看到了它是什么。。。

<html>

<body>

  <div id="sidebar">
        <ul>
           <li><a href="#contacts" >Contact</a></li>

                /***here is the link*****/`
        </ul>
   </div>

<div style="height: 250px;" id="contacts">

            /*here your content*/

       </div>

</body>

</html>

我采用了保罗的方法,这对我很有效。我有一个 TreeView PreRender . 一旦 树景 我运行以下命令。

if (Page.IsPostBack)
        {
            string s2 = @"var elem = document.getElementById('{0}_SelectedNode');
                          if(elem != null )
                          {
                                var node = document.getElementById(elem.value);
                                if(node != null)
                                {
                                     node.scrollIntoView(true);
                                }
                          }
                        ";
            ScriptManager.RegisterStartupScript(this, this.GetType(), "myscript", s2.Replace("{0}", tvOrgChart.ClientID), true);
        }

功劳归于 Paul Kimmel

您还可以使用以下代码:

        var elem = document.getElementById('TreeView1_SelectedNode');   
        if(elem != null )   
        {     
            var node = document.getElementById(elem.value);     
            if(node != null)     
            {       
                node.scrollIntoView(true);       
            }   
        } 

Paul Kimmel

将此方法添加到代码隐藏中。这对我有用。用treeView控件的ID替换treeView。

    protected override void OnPreRender(EventArgs e) {
        //return some code to run on the client
        string jsScript = @"
            <script language=javascript>
                function Tree_scrollIntoView() {
                    var data = " + treeView.ClientID + @"_Data;
                    if (!data) {
                        return;
                    }
                    if ((typeof(data.selectedClass) != ""undefined"") && (data.selectedClass != null)) {
                        var id = data.selectedNodeID.value;
                        if (id.length > 0) {
                            var selectedNode = document.getElementById(id);
                            if ((typeof(selectedNode) != ""undefined"") && (selectedNode != null)) {
                                selectedNode.scrollIntoView(true)
                            }
                        }
                    }
                }

                $(document).ready(function () {
                    Tree_scrollIntoView();
                });                    
            </script>";

        string jsScriptKey = "Scroll_treeview_to_selected";
        if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), jsScriptKey)) {
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(), jsScriptKey, jsScript);
        }

        base.OnPreRender(e);
    }