快捷導(dǎo)航

JS無限樹狀列表實(shí)現(xiàn)代碼

更新時間：2011年01月11日 01:55:28 作者：

本人水平有限，這么個東東想了好幾天才弄出來個半成品，還有一些問題沒有解決，先放上來存著備忘，也望高手指點(diǎn)一二。

tree.js

 
/******************************** 
樹形組織框架列表 
v1.0 
2011年1月6日 
作者：flycrosscloud 
********************************/ 
//初始化框架 
var allImages = { 
HasNodeClose: "<img src='image/ftv2pnode.gif'/>", //包含子節(jié)點(diǎn)，閉合狀態(tài)（不是最后一個) 
HasNodeOpen: "<img src='image/ftv2mnode.gif'/>", //包含子節(jié)點(diǎn)，打開狀態(tài)（不是最后一個） 
LastHasNodeClose: "<img src='image/ftv2plastnode.gif'/>", //包含子節(jié)點(diǎn)，閉合狀態(tài)（最后一個） 
LastHasNodeOpen: "<img src='image/ftv2mlastnode.gif'/>", //包含子節(jié)點(diǎn)，打開狀態(tài)（最后一個） 
CommonNode: "<img src='image/ftv2node.gif'/>", //不包含子節(jié)點(diǎn)，普通節(jié)點(diǎn)（不是最后一個） 
LastCommonNode: "<img src='image/ftv2lastnode.gif'/>", //不包含子節(jié)點(diǎn)，普通節(jié)點(diǎn)（最后一個） 
NodeLine: "<img src='image/ftv2vertline.gif'/>", //節(jié)點(diǎn)間連線 
NodeClose: "<img src='image/department.gif'/>", //節(jié)點(diǎn)關(guān)閉狀態(tài) 
NodeOpen: "<img src='image/departmentopen.gif'/>", //節(jié)點(diǎn)打開狀態(tài) 
NodeBlank: "<img src='image/ftv2vertlineblank.gif'/>"http://空白連線 
}; 
$(function () 
{ 
$.post("http://localhost/system/asmx/wsTree.asmx/HelloWorld", function (data) { InitTree(data); }); 
}); 
function InitTree(org_data) 
{ 
var org = eval("(" + org_data + ")"); 
drawtree(org, 1, "", "#nodeTree"); 
$("#nodeTree img").bind("click", function (event) 
{ 
$(this).parent().find("ul").toggle(); 

}); 
} 
function drawtree(org, s, pPreLine, ulname) 
{ 
var orgLength = org.length; 
var PreLine; 
var count = s; 

for (var i = 0; i < orgLength; i++) 
{ 
var NodeImg = allImages.NodeClose; //項(xiàng)目前圖標(biāo) 
var PreNodeLine; //項(xiàng)目圖標(biāo)前連線 
//確定項(xiàng)目前圖標(biāo) 
if (org[i].ChildUnits != null)//如果包含子節(jié)點(diǎn) 
{ 
NodeImg = allImages.NodeOpen; 
} 
//確定圖形前連線 
if ((org[i].ChildUnits != null) && (i == orgLength - 1)) 
{ 
//包含子節(jié)點(diǎn)并且是本層最后一個節(jié)點(diǎn) 
PreNodeLine = allImages.LastHasNodeOpen; 
} 
if ((org[i].ChildUnits == null) && (i == orgLength - 1)) 
{ 
//不包含子節(jié)點(diǎn)并且是本層最后一個節(jié)點(diǎn) 
PreNodeLine = allImages.LastCommonNode; 
} 
if ((org[i].ChildUnits != null) && (i != orgLength - 1)) 
{ 
//包含子節(jié)點(diǎn)并且不是本層最后一個節(jié)點(diǎn) 
PreNodeLine = allImages.HasNodeOpen; 
} 
if ((org[i].ChildUnits == null) && (i != orgLength - 1)) 
{ 
//不包含子節(jié)點(diǎn)并且不是本層最后一個節(jié)點(diǎn) 
PreNodeLine = allImages.CommonNode; 
} 
if (i == orgLength - 1) 
{ 
PreLine = pPreLine + allImages.NodeBlank; 
} 
else 
{ 
PreLine = pPreLine + allImages.NodeLine; 
} 
var temp = $("<li>" + pPreLine + PreNodeLine + NodeImg + "<a href='#'>" + org[i].unit_name + "</a></li>"); 
$(ulname).append(temp); 
if (org[i].ChildUnits != null) 
{ 
temp.append("<ul></ul>"); 
var content = temp.find("ul"); 
drawtree(org[i].ChildUnits, count + 1, PreLine,content ); 
} 
} 

} 

tree.css

復(fù)制代碼代碼如下:

 
li 
{ 
vertical-align: middle; 
font-size: 16px; 
display: block;line-height: 22px;list-style-type: none;height: 22px;padding: 0px; margin:0px; 
} 
ul a 
{ 
height:22px; 
line-height:22px; 
color:#123231; 
text-decoration:none; 
} 
ul 
{ 
list-style-type:none; 
padding:0px; 
margin:0px; 
} 
img 
{ 
vertical-align:middle; 
cursor:pointer; 
} 
* 
{ 
padding:0px; 
margin:0px; 
} 

test.htm

復(fù)制代碼代碼如下:

 
<html> 
<head> 
<link href="tree.css" rel="stylesheet" type="text/css" /> 
<script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script> 
<script src="tree.js" type="text/javascript"></script> 
</head> 
<body> 
<ul id="nodeTree"> 
</ul> 
</body> 
</html> 

測試數(shù)據(jù)格式（json）

復(fù)制代碼代碼如下:

 
[{"unit_id":1,"unit_name":"一級","father_unit_id":0,"ChildUnits":[{"unit_id":2,"unit_name":"二級","father_unit_id":1,"ChildUnits":[{"unit_id":3,"unit_name":"三級1","father_unit_id":2,"ChildUnits":[{"unit_id":6,"unit_name":"四級1","father_unit_id":3,"ChildUnits":null},{"unit_id":7,"unit_name":"四級2","father_unit_id":3,"ChildUnits":null}]},{"unit_id":4,"unit_name":"三級2","father_unit_id":2,"ChildUnits":[{"unit_id":8,"unit_name":"四級3","father_unit_id":4,"ChildUnits":null},{"unit_id":9,"unit_name":"四級4","father_unit_id":4,"ChildUnits":null}]},{"unit_id":5,"unit_name":"三級3","father_unit_id":2,"ChildUnits":[{"unit_id":10,"unit_name":"四級5","father_unit_id":5,"ChildUnits":null},{"unit_id":11,"unit_name":"四級6","father_unit_id":5,"ChildUnits":null}]}]},{"unit_id":12,"unit_name":"二級2","father_unit_id":1,"ChildUnits":null}]}] 

本人水平有限，這么個東東想了好幾天才弄出來個半成品，還有一些問題沒有解決，先放上來存著備忘，也望高手指點(diǎn)一二。
思路：
使用嵌套<ul>標(biāo)簽實(shí)現(xiàn)，每一級用一個<ul>，有下級節(jié)點(diǎn)的用<li>嵌套<ul>，遞歸實(shí)現(xiàn)。剛開始全部都用<li>做成了，可發(fā)現(xiàn)要實(shí)現(xiàn)隱顯實(shí)在是太麻煩。
問題：
1、在IE下顯示連線有斷續(xù)，CSS不熟，沒搞定，我自己感覺還湊合，就懶得再搞了，呵呵。
2、隱顯時前置圖片要變換，還沒實(shí)現(xiàn)，不過我感覺問題不大。
后臺代碼就不放了，需要的請留言，其實(shí)也很簡單，就是節(jié)點(diǎn)的遞歸排序麻煩點(diǎn)。
顯示效果：