一，簡介
ligerTree的功能列表：
1,支持本地數據和服務器數據(配置data或者url)
2,支持原生html生成Tree
3,支持動態獲取增加/修改/刪除節點
4,支持大部分常見的事件
5,支持獲取選中行等常見的接口方法
二，第一個例子
引入庫文件
遵循LigerUI系列插件的設計原則(插件盡量單獨)，ligerTree是一個單獨的插件，也就是說只需要引入plugins/ligerTree.js和樣式css文件就可以使用(當然必須先引入jQuery)，在這個例子中，我把tree用到的樣式和圖片分離了出來，有興趣的朋友可以下載來看看
<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>節點1</span>
<ul>
<li>
<span>節點1.1</span>
<ul>
<li><span>節點1.1.1</span></li>
<li><span>節點1.1.2</span></li>
</ul>
</li>
<li><span>節點1.2</span></li>
</ul>
</li>
</ul>
調用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();
效果圖
三，常用場景
場景一：不使用復選框：
$("#tree2").ligerTree({ checkbox: false });
場景二：不使用復習框和圖標：
$("#tree3").ligerTree({ checkbox: false, parentIcon: null, childIcon: null });
效果如圖：
?
append(parentNode, newdata)增加節點集合clear()清空collapseAll()全部節點都折疊demotion(treenode)降級為葉節點級別expandAll()全部節點都展開getChecked()獲取選擇的行(復選框)getData()獲取樹的數據源getParentTreeItem(treenode, level)獲取父節點getSelected()獲取選擇的行hasChildren(treenode)是否包含子節點 loadData(node, url, param)加載數據remove(node)刪除節點upgrade(treenode)升級為父節點級別