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实现的效果图为：
