一，簡(jiǎn)介
ligerTree的功能列表：
1,支持本地?cái)?shù)據(jù)和服務(wù)器數(shù)據(jù)(配置data或者url)
2,支持原生html生成Tree
3,支持動(dòng)態(tài)獲取增加/修改/刪除節(jié)點(diǎn)
4,支持大部分常見的事件
5,支持獲取選中行等常見的接口方法
二，第一個(gè)例子
引入庫(kù)文件
遵循LigerUI系列插件的設(shè)計(jì)原則(插件盡量單獨(dú))，ligerTree是一個(gè)單獨(dú)的插件，也就是說(shuō)只需要引入plugins/ligerTree.js和樣式css文件就可以使用(當(dāng)然必須先引入jQuery)，在這個(gè)例子中，我把tree用到的樣式和圖片分離了出來(lái)，有興趣的朋友可以下載來(lái)看看
<script src="lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<link href="lib/ligerUI/skins/Aqua/css/ligerui-tree.css" rel="stylesheet" type="text/css"/>
<script src="lib/ligerUI/js/plugins/ligerTree.js" type="text/javascript"></script>
加入HTML
<ul id="tree1">
<li>
<span>節(jié)點(diǎn)1</span>
<ul>
<li>
<span>節(jié)點(diǎn)1.1</span>
<ul>
<li><span>節(jié)點(diǎn)1.1.1</span></li>
<li><span>節(jié)點(diǎn)1.1.2</span></li>
</ul>
</li>
<li><span>節(jié)點(diǎn)1.2</span></li>
</ul>
</li>
</ul>
調(diào)用ligerTree
<table style="margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; min-height: inherit !important; border-collapse: collapse !important; background-position: initial initial !important; background-repeat: initial initial !important; "><td style="font-size: 1em !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0.5em !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: initial !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; text-align: left !important; float: none !important; vertical-align: top !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; min-height: inherit !important; border-left-style: none !important; border-left-color: initial !important; color: rgb(0, 0, 0) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">$("#tree1").ligerTree();
效果圖
三，常用場(chǎng)景
場(chǎng)景一：不使用復(fù)選框：
$("#tree2").ligerTree({ checkbox: false });
場(chǎng)景二：不使用復(fù)習(xí)框和圖標(biāo)：
$("#tree3").ligerTree({ checkbox: false, parentIcon: null, childIcon: null });
效果如圖：
?
append(parentNode, newdata)增加節(jié)點(diǎn)集合clear()清空collapseAll()全部節(jié)點(diǎn)都折疊demotion(treenode)降級(jí)為葉節(jié)點(diǎn)級(jí)別expandAll()全部節(jié)點(diǎn)都展開getChecked()獲取選擇的行(復(fù)選框)getData()獲取樹的數(shù)據(jù)源getParentTreeItem(treenode, level)獲取父節(jié)點(diǎn)getSelected()獲取選擇的行hasChildren(treenode)是否包含子節(jié)點(diǎn) loadData(node, url, param)加載數(shù)據(jù)remove(node)刪除節(jié)點(diǎn)upgrade(treenode)升級(jí)為父節(jié)點(diǎn)級(jí)別