欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2011年01月11日 01:55:28   作者：  
本人水平有限，這么個東東想了好幾天才弄出來個半成品，還有一些問題沒有解決，先放上來存著備忘，也望高手指點一二。
tree.js
復(fù)制代碼 代碼如下:

/********************************
樹形組織框架列表
v1.0
2011年1月6日
作者：flycrosscloud
********************************/
//初始化框架
var allImages = {
HasNodeClose: "<img src='image/ftv2pnode.gif'/>", //包含子節(jié)點，閉合狀態(tài)（不是最后一個)
HasNodeOpen: "<img src='image/ftv2mnode.gif'/>", //包含子節(jié)點，打開狀態(tài)（不是最后一個）
LastHasNodeClose: "<img src='image/ftv2plastnode.gif'/>", //包含子節(jié)點，閉合狀態(tài)（最后一個）
LastHasNodeOpen: "<img src='image/ftv2mlastnode.gif'/>", //包含子節(jié)點，打開狀態(tài)（最后一個）
CommonNode: "<img src='image/ftv2node.gif'/>", //不包含子節(jié)點，普通節(jié)點（不是最后一個）
LastCommonNode: "<img src='image/ftv2lastnode.gif'/>", //不包含子節(jié)點，普通節(jié)點（最后一個）
NodeLine: "<img src='image/ftv2vertline.gif'/>", //節(jié)點間連線
NodeClose: "<img src='image/department.gif'/>", //節(jié)點關(guān)閉狀態(tài)
NodeOpen: "<img src='image/departmentopen.gif'/>", //節(jié)點打開狀態(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; //項目前圖標(biāo)
var PreNodeLine; //項目圖標(biāo)前連線
//確定項目前圖標(biāo)
if (org[i].ChildUnits != null)//如果包含子節(jié)點
{
NodeImg = allImages.NodeOpen;
}
//確定圖形前連線
if ((org[i].ChildUnits != null) && (i == orgLength - 1))
{
//包含子節(jié)點并且是本層最后一個節(jié)點
PreNodeLine = allImages.LastHasNodeOpen;
}
if ((org[i].ChildUnits == null) && (i == orgLength - 1))
{
//不包含子節(jié)點并且是本層最后一個節(jié)點
PreNodeLine = allImages.LastCommonNode;
}
if ((org[i].ChildUnits != null) && (i != orgLength - 1))
{
//包含子節(jié)點并且不是本層最后一個節(jié)點
PreNodeLine = allImages.HasNodeOpen;
}
if ((org[i].ChildUnits == null) && (i != orgLength - 1))
{
//不包含子節(jié)點并且不是本層最后一個節(jié)點
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}]}]

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

相關(guān)文章

最新評論