js tree问题（点击父节点加载子节点集合）

Question

现在可以读取加载父节点，问题是点击父节点，子集合老是出问题，请教各位/// <summary>
        /// 读取数据 模拟数据
        /// </summary>
        /// <returns></returns>
        [WebMethod]
        public static List<Data> ReturnData()
        {
            List<Data> list = new List<Data>() 
                                {
                                    new Data(){ID = 1, Name="父级节点1",ParentID=0 },
                                    new Data(){ID = 2, Name="父级节点2",ParentID=0 },
                                    new Data(){ID = 3, Name="父级节点3",ParentID=0 },
                                    new Data(){ID = 4, Name="父级节点4",ParentID=0 },                                    new Data(){ID = 5, Name="子节点1",ParentID=1 },
                                    new Data(){ID = 6, Name="子节点2",ParentID=2 },
                                    new Data(){ID = 7, Name="子节点3",ParentID=3 },
                                };
            return list;
        }        /// <summary>
        /// 根据父级节点ID获取子节点集合
        /// </summary>
        /// <param name="ParentClientID"></param>
        /// <returns></returns>
        [WebMethod]
        public static List<Data> ReturnChildDataByID(int ParentClientID)
        {
            List<Data> list = new List<Data>() 
                                {
                                    new Data(){ID = 5, Name="子节点1",ParentID=1 }
                                };            return list;
        }
    }    /// <summary>
    /// Model
    /// </summary>
    public class Data
    {
        public int ID { set; get; }
        public string Name { set; get; }
        public int ParentID { set; get; }
    }
window.onload = function () {
    $.ajax({
        url: 'Default.aspx/ReturnData',
        data: {},
        type: "POST",
        contentType: "application/json",
        success: function (data) {
            //alert('success');
            var container = document.getElementById("treeContainer");
            var tree = new Tree(container);
            for (var i = 0; i < data.d.length; i++) {
                var node = null;
                //if (data.d[i]["ParentID"].toString() == '0') {
                    //var component = document.createElement("div");
                    //var container = document.getElementById("treeContainer");                    node = new CreateTreeItem(tree, data.d[i]["Name"].toString(), "img/folder.gif", "#", true,data.d[i]["ID"].toString());
                //}
            }
        },
        error: function (a) {
            alert(a.responseText);
        }
    });
}var tabSize = "20px";var Tree = function (container) {
    this.type = 0;
    //创建div容器
    this.component = document.createElement("div");
    container.appendChild(this.component);    this.subs = new Array();
}function CreateTreeItem(parent, text, imgSrc, url, opened,value) {
    if (!parent)
        return;    //var container = document.getElementById("treeContainer");
    //var tree = new Tree(container);
    this.type = 1;
    this.parent = parent;
    if (value == 0) {
        
    }
    this.opened = opened;
    if (this.opened == undefined || this.opened == null) {
        this.opened = false;
    }    this.component = document.createElement("div");
    if (this.parent.type && !this.parent.opened)
        this.component.style.display = "none";    // img  
    if (imgSrc) {
        this.img = document.createElement("img");
        this.img.src = imgSrc;
        this.component.appendChild(this.img);
        this.img.parent = this;
        this.img.style.cursor = 'hand';
        this.img.onclick = function () {
            var subs = this.parent.subs;
            if (this.parent.opened) {
                this.parent.opened = false;
                //hide
                for (var child in subs) {
                    subs[child].component.style.display = "none";
                }
            } else {//show
                this.parent.opened = true;
                for (var child in subs) {
                    subs[child].component.style.display = "block";
                }
            }
            
        }
    }    // url and text  
    if (url) {
        this.textNode = document.createElement("span");
        this.textNode.innerHTML = text;
        //弹出文本
        this.textNode.onclick = function () {
            alert('选中节点Text值：' + this.innerHTML);
            alert('选中节点ID值：' + $(this).next().val());        }
        //设置隐藏值 保存节点ID
        this.NodeValue = document.createElement("input");
        this.NodeValue.setAttribute("type","hidden");
        this.NodeValue.setAttribute("value", value);        this.link = document.createElement("a");
        this.link.href = url;
        this.link.appendChild(this.textNode);
        this.link.appendChild(this.NodeValue);
        this.component.appendChild(this.link);
    } else {
        this.textNode = document.createElement("span");
        this.textNode.innerHTML = text;
        //弹出文本
        this.textNode.onclick = function () {
            alert('选中节点Text值：' + this.innerHTML);
            alert('选中节点ID值：' + $(this).next().val());
            //追加子节点集合
            /*
                获取选中节点ID，异步传参调用后台方法，把当前对象传递给CreateItem函数的父节点参数
             //点击加载子节点
            */
        }
        //设置隐藏域 保存节点ID
        this.NodeValue = document.createElement("input");
        this.NodeValue.setAttribute("type","hidden");
        this.NodeValue.setAttribute("value", value);        this.component.appendChild(this.textNode);
        this.component.appendChild(this.NodeValue);
    }    this.component.style.paddingLeft = parent.type ? tabSize : "0px";
    this.parent.component.appendChild(this.component);    this.subs = new Array();
    this.parent.subs[this.parent.subs.length] = this;
}

Answer 1

页面html：
 <div id="treeContainer">
    </div>