在数据库中有这样的一张表(常见的地区选择也会是类似的结构),主要包括 ID、Name、ParentID,
以实现无限级层树的效果,怎样把这样的树展现出来呢?这里分别通过前后台两种方法实现。
1、后台通过绑定到TreeView,实现无限级的树。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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数据,拼接数据形成树层。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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实现的效果图为: