TreeView (后台)和Javascript(前台) 实现的无限级树

　　在数据库中有这样的一张表(常见的地区选择也会是类似的结构)，主要包括 ID、Name、ParentID，

以实现无限级层树的效果，怎样把这样的树展现出来呢？这里分别通过前后台两种方法实现。

1、后台通过绑定到TreeView，实现无限级的树。

　　

 protected void Page_Load(object sender, EventArgs e)
        {
            CinemaGroupBLL bll = new CinemaGroupBLL();

            BindTreeView(bll.GetAllGroup(),TreeView1.Nodes,"0");
        }


        //绑定列表
        private void BindTreeView(DataTable dataTable, TreeNodeCollection TreeNodes, string parentId)
        {
            DataView dataView = new DataView(dataTable);
            TreeNode node;
            dataView.RowFilter = "ParentID=" + "'" + parentId + "'";
            dataView.Sort = "SortNum DESC";
            foreach (DataRowView dataRowView in dataView)
            {
                node = new TreeNode();
                node.Text = dataRowView["GroupName"].ToString();

                TreeNodes.Add(node);
                BindTreeView(dataTable, node.ChildNodes, dataRowView["GroupID"].ToString());
            }
        }

 

2、通过前台获取指定格式的JSON数据，拼接数据形成树层。

<script type="text/javascript">

        var temp = [{ 'ID': 1, 'Name': '总部', 'ParentID': 0 },
                    { 'ID': 2, 'Name': '武汉分公司', 'ParentID': 1 },
                    { 'ID': 3, 'Name': '北京分公司', 'ParentID': 1 },
                    { 'ID': 4, 'Name': '武汉影院1', 'ParentID': 2 },
                    { 'ID': 5, 'Name': '群光广场', 'ParentID': 4 },
                    { 'ID': 6, 'Name': '麦当劳', 'ParentID': 5 },
                    { 'ID': 6, 'Name': '北京XX影院', 'ParentID': 3 }
        ];

        $(function () {
                        var arr = [''];

                        CreateTree(temp, arr, 0);

                        var str = arr.join('');
                        //去除空的<ul></ul>
                        str = str.replace(/<ul>\s*<\/ul>/g, '');

                        $('#treeDiv').html(str);
                    });

        //递归创建树
        function CreateTree(Json, arrHtml, parnetID) {
            if (Json == null || Json.length < 1) {
                return;
            }

            arrHtml.push('<ul>');

            for (var i = 0, len = Json.length; i < len; i++) {
                if (parnetID == Json[i]['ParentID']) {
                    arrHtml.push('<li>'+Json[i]['Name']+'</li>');

                    arrHtml.push('<ul>');
                    for (var j = 0, len = Json.length; j < len; j++) {
                        if (Json[i]['ID'] == Json[j]['ParentID']) {
                            arrHtml.push('<li>' + Json[j]['Name'] + '</li>');
                            CreateTree(Json,arrHtml,Json[j]['ID']);
                         }
                    }

                    arrHtml.push('</ul>');
                 }
            }
            arrHtml.push('</ul>');
         }
    
    </script>

js实现的效果图为：