TreeView (後台)和Javascript(前台) 實現的無限級樹

　　在資料庫中有這樣的一張表(常見的地區選擇也會是類似的結構)，主要包括 ID、Name、ParentID，

以實現無限級層樹的效果，怎樣把這樣的樹展現出來呢？這裡分別通過前後台兩種方法實現。

1、後台通過綁定到TreeView，實現無限級的樹。

　　

View Code

 1  protected void Page_Load(object sender, EventArgs e) 2         { 3             CinemaGroupBLL bll = new CinemaGroupBLL(); 4  5             BindTreeView(bll.GetAllGroup(),TreeView1.Nodes,"0"); 6         } 7  8  9         //繫結資料行表10         private void BindTreeView(DataTable dataTable, TreeNodeCollection TreeNodes, string parentId)11         {12             DataView dataView = new DataView(dataTable);13             TreeNode node;14             dataView.RowFilter = "ParentID=" + "'" + parentId + "'";15             dataView.Sort = "SortNum DESC";16             foreach (DataRowView dataRowView in dataView)17             {18                 node = new TreeNode();19                 node.Text = dataRowView["GroupName"].ToString();20 21                 TreeNodes.Add(node);22                 BindTreeView(dataTable, node.ChildNodes, dataRowView["GroupID"].ToString());23             }24         }

 

2、通過前台擷取指定格式的JSON資料，拼接資料形成樹層。

View Code

<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實現的為：