Javascript(Ajax)异步加载树型结构的一个样例

Javascript(Ajax)异步加载树型结构的一个样例

如下代码是添加一个虚拟节点以便让树的每一个节点显示为有子节点的形式，

该树的节点是由Microsoft.Web.UI.WebControls.TreeNode扩展而来如下是扩展代码:

    /// <summary>
    /// Function:Extend the attributes of the TreeNode
    /// Refactor:Aricous
    /// Refactor date:2008-10-14
    /// </summary>
    public class JrscTreeNode : Microsoft.Web.UI.WebControls.TreeNode
    {
        protected override void AddAttributesToRender(HtmlTextWriter writer)
        {
            if (HasChildNode)
                writer.AddAttribute("HasChildNode", HasChildNode.ToString());

            if (NodeType.Length != 0)
                writer.AddAttribute("NodeType", NodeType.ToString());

            if (Tag.Length != 0)
                writer.AddAttribute("Tag", Tag.ToString());

            base.AddAttributesToRender(writer);
        }

        /// <summary>
        /// To indicate the node has a children
        /// </summary>
        [PersistenceMode(PersistenceMode.Attribute)]
        public bool HasChildNode
        {
            get
            {
                object str = ViewState["HasChildNode"];
                return ((str == null) ? false : (bool)str);
            }
            set
            {
                ViewState["HasChildNode"] = value;
            }
        }

        /// <summary>
        /// to indicate the node's type
        /// </summary>
        [PersistenceMode(PersistenceMode.Attribute)]
        public string NodeType
        {
            get
            {
                string szNodeType = ViewState["NodeType"] == null ? "" : ViewState["NodeType"].ToString();
                return szNodeType;
            }
            set
            {
                ViewState["NodeType"] = value;
            }
        }

        /// <summary>
        /// to store more information
        /// </summary>
        [PersistenceMode(PersistenceMode.Attribute)]
        public string Tag
        {
            get
            {
                string szTag = ViewState["Tag"] == null ? "" : ViewState["Tag"].ToString();
                return ((szTag == null) ? "" : szTag);
            }
            set
            {
                ViewState["Tag"] = value;
            }
        }
    }

在Web页面的服务器端代码部分要注册onexpand事件,一般地在Page_Load事件中出现:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

                //GetTree();//关于树的其他的初始化内容
                tree.Attributes.Add("onexpand", "tree_onexpand(this)");
            }
        }

tree.Attributes.Add("onexpand", "tree_onexpand(this)");

<script type="text/javascript">
    var clock = null;
    var xmlHttp = null;
    function tree_onexpand(tree)
    {
        var node = tree.getTreeNode(tree.clickedNodeIndex);
        var nodes = node.getChildren();  
        if(nodes != null && nodes.length == 1)
        {
            if(nodes[0].getAttribute( "ID" ) == "virtual")
            {
                nodes[0].remove();
            }
        }
        loading(tree);
    }
    function loading(tree)
    {
        try
        {
            var node = tree.getTreeNode(tree.clickedNodeIndex); //获得选定的节点
            if( node.getChildren().length == 0 )
            {
                tree.style.cursor ="wait";
                var temp = tree.createTreeNode();
                temp.setAttribute( "Text", "正在加载数据......");
                node.add(temp);
                clock  = window.setTimeout( function call() { AsynchBind( tree, node, temp); } ,10);
            }
        }
        catch(e)
        {
            alert(e.name + ":" + e.message);
        }
    }
   
    function AsynchBind(tree, ParentNode,temp)
    {
        window.clearTimeout(clock);
        temp.remove();

        var Year = ParentNode.getAttribute("Tag");
        var UserID   = ParentNode.getAttribute("ID");       
        var NodeType = ParentNode.getAttribute("Type");
        var ParentID = ParentNode.getAttribute("NodeData");
        if( xmlHttp == null )
     {
         GetXmlHttp();
     }
        var Url = "Source.aspx?ParentID="+ ParentID + "&Type=" + NodeType  + "&UserID=" + UserID + "&Year=" + Year;
        xmlHttp.open("POST",Url,false);
        xmlHttp.send(); //发送客户端请求 
        //接收 Source.aspx 返回的格式化字符串数据 以填充目录信息
        var retStr = xmlHttp.responseText; //接收服务端返回的数据信息
        xmlHttp =null;
        if( retStr != "" )//如果接受数据为空则不创建下级节点
        {
         var arrs = retStr.split("^");
         var lens = arrs.length;
         var arr;
         var node;
         for(var i=1;i<lens;i++)//外部循环
         {
          node = tree.createTreeNode(); //注意外部每循环一次创建一个下级节点
          arr = arrs[i].split("|");
          node.setAttribute( "Text",              arr[0]);
          node.setAttribute( "Type",             arr[1]);
          node.setAttribute( "Target",           arr[2]);
          node.setAttribute( "NavigateUrl",    arr[3]);
          node.setAttribute( "ImageUrl",       arr[4]);
          node.setAttribute( "HasChildNode",arr[5]);
          node.setAttribute( "NodeData",     arr[6]);
          node.setAttribute( "ID",                arr[7]); 
          node.setAttribute( "Tag",              arr[8]);
         
          var vnode = tree.createTreeNode();
          vnode.setAttribute( "ID" , "virtual");
          vnode.setAttribute( "Text" , "virtual...");         
          node.add(vnode);
          ParentNode.add(node);
         }
        }
        tree.style.cursor ="default";
    }
    function GetXmlHttp()
    {
        if (window.ActiveXObject)
     {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if (window.XMLHttpRequest)
        {
            xmlHttp = new XMLHttpRequest();
        }
    }
    </script>

posted on 2008-10-14 14:08 gguowang 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/gguowang/archive/2008/10/14/1310765.html