JS無限樹狀列表實現代碼_javascript技巧

tree.js
代碼如下:
/********************************
樹形組織框架列表
v1.0
2011年1月6日
作者：flycrosscloud
********************************/
//初始化框架
var allImages = {
HasNodeClose: "", //包含子節點，閉合狀態（不是最后一個)
HasNodeOpen: "", //包含子節點，打開狀態（不是最后一個）
LastHasNodeClose: "", //包含子節點，閉合狀態（最后一個）
LastHasNodeOpen: "", //包含子節點，打開狀態（最后一個）
CommonNode: "", //不包含子節點，普通節點（不是最后一個）
LastCommonNode: "", //不包含子節點，普通節點（最后一個）
NodeLine: "", //節點間連線
NodeClose: "", //節點關閉狀態
NodeOpen: "", //節點打開狀態
NodeBlank: ""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; //項目前圖標
var PreNodeLine; //項目圖標前連線
//確定項目前圖標
if (org[i].ChildUnits != null)//如果包含子節點
{
NodeImg = allImages.NodeOpen;
}
//確定圖形前連線
if ((org[i].ChildUnits != null) && (i == orgLength - 1))
{
//包含子節點并且是本層最后一個節點
PreNodeLine = allImages.LastHasNodeOpen;
}
if ((org[i].ChildUnits == null) && (i == orgLength - 1))
{
//不包含子節點并且是本層最后一個節點
PreNodeLine = allImages.LastCommonNode;
}
if ((org[i].ChildUnits != null) && (i != orgLength - 1))
{
//包含子節點并且不是本層最后一個節點
PreNodeLine = allImages.HasNodeOpen;
}
if ((org[i].ChildUnits == null) && (i != orgLength - 1))
{
//不包含子節點并且不是本層最后一個節點
PreNodeLine = allImages.CommonNode;
}
if (i == orgLength - 1)
{
PreLine = pPreLine + allImages.NodeBlank;
}
else
{
PreLine = pPreLine + allImages.NodeLine;
}
var temp = $("

" + pPreLine + PreNodeLine + NodeImg + "" + org[i].unit_name + "

");
$(ulname).append(temp);
if (org[i].ChildUnits != null)
{
temp.append("");
var content = temp.find("ul");
drawtree(org[i].ChildUnits, count + 1, PreLine,content );
}
}

}

tree.css
代碼如下:
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
代碼如下:

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com