快捷導(dǎo)航

jQuery EasyUI API 中文文檔 - Tree樹使用介紹

更新時(shí)間：2011年11月19日 18:55:55 作者：

jQuery EasyUI API 中文文檔 - Tree樹使用介紹，需要的朋友可以參考下。

用 $.fn.tree.defaults 重寫了 defaults。

依賴

draggable
droppable
用法

Tree 能在 <ul> 元素里定義，此標(biāo)記可以定義為葉節(jié)點(diǎn)和子節(jié)點(diǎn)。下面是一個(gè)示例：

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

 
<ul id="tt"> 
<li> 
<span>Folder</span> 
<ul> 
<li> 
<span>Sub Folder 1</span> 
<ul> 
<li> 
<span><a href="#">File 11</a></span> 
</li> 
<li> 
<span>File 12</span> 
</li> 
<li> 
<span>File 13</span> 
</li> 
</ul> 
</li> 
<li> 
<span>File 2</span> 
</li> 
<li> 
<span>File 3</span> 
</li> 
</ul> 
</li> 
<li> 
<span>File21</span> 
</li> 
</ul> 

Tree 也可以在一個(gè)空的 <ul> 元素里定義。
<ul id="tt"></ul>

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

 
$('#tt').tree({ 
url:'tree_data.json' 
}); 

樹數(shù)據(jù)的格式（Tree data format）
每個(gè)節(jié)點(diǎn)可以包含下列特性：
id：節(jié)點(diǎn)的 id，它對(duì)于加載遠(yuǎn)程數(shù)據(jù)很重要。
text：顯示的節(jié)點(diǎn)文字。
state：節(jié)點(diǎn)狀態(tài)， 'open' 或 'closed'，默認(rèn)是 'open'。當(dāng)設(shè)為 'closed' 時(shí)，此節(jié)點(diǎn)有子節(jié)點(diǎn)，并且將從遠(yuǎn)程站點(diǎn)加載它們。
checked：指示節(jié)點(diǎn)是否被選中。 Indicate whether the node is checked selected.
attributes：給一個(gè)節(jié)點(diǎn)追加的自定義屬性。
children：定義了一些子節(jié)點(diǎn)的節(jié)點(diǎn)數(shù)組。
示例：

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

 
[{ 
"id":1, 
"text":"Folder1", 
"iconCls":"icon-save", 
"children":[{ 
"text":"File1", 
"checked":true 
},{ 
"text":"Books", 
"state":"open", 
"attributes":{ 
"url":"/demo/book/abc", 
"price":100 
}, 
"children":[{ 
"text":"PhotoShop", 
"checked":true 
},{ 
"id": 8, 
"text":"Sub Bookds", 
"state":"closed" 
}] 
}] 
},{ 
"text":"Languages", 
"state":"closed", 
"children":[{ 
"text":"Java" 
},{ 
"text":"C#" 
}] 
}] 

特性

名稱	類型	說明	默認(rèn)值
url	string	獲取遠(yuǎn)程數(shù)據(jù)的 URL 。	null
method	string	獲取數(shù)據(jù)的 http method 。	post
animate	boolean	定義當(dāng)節(jié)點(diǎn)展開折疊時(shí)是否顯示動(dòng)畫效果。	false
checkbox	boolean	定義是否在每個(gè)節(jié)點(diǎn)前邊顯示 checkbox 。	false
cascadeCheck	boolean	定義是否級(jí)聯(lián)檢查。	true
onlyLeafCheck	boolean	定義是否只在葉節(jié)點(diǎn)前顯示 checkbox 。	false
dnd	boolean	定義是否啟用拖放。	false
data	array	加載的節(jié)點(diǎn)數(shù)據(jù)。	null

事件

很多事件的回調(diào)函數(shù)需要 'node' 函數(shù)，它包含下列特性：

id：綁定到節(jié)點(diǎn)的標(biāo)識(shí)值。
text：顯示的文字。
checked：是否節(jié)點(diǎn)被選中。
attributes：綁定到節(jié)點(diǎn)的自定義屬性。
target：目標(biāo)的 DOM 對(duì)象。

名稱	參數(shù)	說明
onClick	node	當(dāng)用戶點(diǎn)擊一個(gè)節(jié)點(diǎn)時(shí)觸發(fā)， node 參數(shù)包含下列特性： id：節(jié)點(diǎn)的 id text：節(jié)點(diǎn)的文字 checked：節(jié)點(diǎn)是否被選中 attributes：節(jié)點(diǎn)自定義屬性 target：被點(diǎn)擊目標(biāo)的 DOM 對(duì)象
onDblClick	node	當(dāng)用戶雙擊一個(gè)節(jié)點(diǎn)時(shí)觸發(fā)。
onBeforeLoad	node, param	當(dāng)加載數(shù)據(jù)的請(qǐng)求發(fā)出前觸發(fā)，返回 false 就取消加載動(dòng)作。
onLoadSuccess	node, data	當(dāng)數(shù)據(jù)加載成功時(shí)觸發(fā)。
onLoadError	arguments	當(dāng)數(shù)據(jù)加載失敗時(shí)觸發(fā)， arguments 參數(shù)與 jQuery.ajax 的'error' 函數(shù)一樣。.
onBeforeExpand	node	節(jié)點(diǎn)展開前觸發(fā)，返回 false 就取消展開動(dòng)作。
onExpand	node	當(dāng)節(jié)點(diǎn)展開時(shí)觸發(fā)。
onBeforeCollapse	node	節(jié)點(diǎn)折疊前觸發(fā)，返回 false 就取消折疊動(dòng)作。
onCollapse	node	當(dāng)節(jié)點(diǎn)折疊時(shí)觸發(fā)。
onCheck	node, checked	當(dāng)用戶點(diǎn)擊 checkbox 時(shí)觸發(fā)。
onBeforeSelect	node	節(jié)點(diǎn)被選中前觸發(fā)，返回 false 就取消選擇動(dòng)作。
onSelect	node	當(dāng)節(jié)點(diǎn)被選中時(shí)觸發(fā)。
onContextMenu	e, node	當(dāng)右鍵點(diǎn)擊節(jié)點(diǎn)時(shí)觸發(fā)。
onDrop	target, source, point	當(dāng)節(jié)點(diǎn)被拖拽施放時(shí)觸發(fā)。 target：DOM 對(duì)象，拖放的目標(biāo)節(jié)點(diǎn)。 source：源節(jié)點(diǎn)。 point：表示拖放操作，可能是值是： 'append'、'top' 或 'bottom'。
onBeforeEdit	node	編輯節(jié)點(diǎn)前觸發(fā)。
onAfterEdit	node	編輯節(jié)點(diǎn)后觸發(fā)。
onCancelEdit	node	當(dāng)取消編輯動(dòng)作時(shí)觸發(fā)。

方法

名稱	參數(shù)	說明
options	none	返回樹的 options。
loadData	data	加載樹的數(shù)據(jù)。
getNode	target	獲取指定的節(jié)點(diǎn)對(duì)象。
getData	target	獲取指定的節(jié)點(diǎn)數(shù)據(jù)，包括它的子節(jié)點(diǎn)。
reload	target	重新加載樹的數(shù)據(jù)。
getRoot	none	獲取根節(jié)點(diǎn)，返回節(jié)點(diǎn)對(duì)象。
getRoots	none	獲取根節(jié)點(diǎn)們，返回節(jié)點(diǎn)數(shù)組。
getParent	target	獲取父節(jié)點(diǎn)， target 參數(shù)指節(jié)點(diǎn)的 DOM 對(duì)象。
getChildren	target	獲取子節(jié)點(diǎn)， target 參數(shù)指節(jié)點(diǎn)的 DOM 對(duì)象。
getChecked	none	獲取所有選中的節(jié)點(diǎn)。
getSelected	none	獲取選中的節(jié)點(diǎn)并返回它，如果沒有選中節(jié)點(diǎn)，就返回 null。
isLeaf	target	把指定的節(jié)點(diǎn)定義成葉節(jié)點(diǎn)， target 參數(shù)表示節(jié)點(diǎn)的 DOM 對(duì)象。
find	id	找到指定的節(jié)點(diǎn)并返回此節(jié)點(diǎn)對(duì)象。
select	target	選中一個(gè)節(jié)點(diǎn)， target 參數(shù)表示節(jié)點(diǎn)的 DOM 對(duì)象。
check	target	把指定節(jié)點(diǎn)設(shè)置為勾選。
uncheck	target	把指定節(jié)點(diǎn)設(shè)置為未勾選。
collapse	target	折疊一個(gè)節(jié)點(diǎn)， target 參數(shù)表示節(jié)點(diǎn)的 DOM 對(duì)象。
expand	target	展開一個(gè)節(jié)點(diǎn)， target 參數(shù)表示節(jié)點(diǎn)的 DOM 對(duì)象。
collapseAll	target	折疊所有的節(jié)點(diǎn)們。
expandAll	target	展開所有的節(jié)點(diǎn)們。
expandTo	target	從指定節(jié)點(diǎn)的根部展開。
append	param	追加一些子節(jié)點(diǎn)們到一個(gè)父節(jié)點(diǎn)， param 參數(shù)有兩個(gè)特性： parent：DOM 對(duì)象，追加到的父節(jié)點(diǎn)，如果沒有分配，則追加為根節(jié)點(diǎn)。 data：數(shù)組，節(jié)點(diǎn)們的數(shù)據(jù)。
toggle	target	切換節(jié)點(diǎn)的展開/折疊狀態(tài)， target 參數(shù)表示節(jié)點(diǎn)的 DOM 對(duì)象。
insert	param	在指定節(jié)點(diǎn)的前邊或后邊插入一個(gè)節(jié)點(diǎn)， param 參數(shù)包含下列特性： before：DOM 對(duì)象，前邊插入的節(jié)點(diǎn)。 after：DOM 對(duì)象，后邊插入的節(jié)點(diǎn)。 data：對(duì)象，節(jié)點(diǎn)數(shù)據(jù)。
remove	target	移除一個(gè)節(jié)點(diǎn)和它的子節(jié)點(diǎn)們， target 參數(shù)表示節(jié)點(diǎn)的 DOM 對(duì)象。
pop	target	彈出一個(gè)節(jié)點(diǎn)和它的子節(jié)點(diǎn)們，此方法和 remove 一樣，但是返回了移除的節(jié)點(diǎn)數(shù)據(jù)。
update	param	跟心指定的節(jié)點(diǎn)， param 參數(shù)有下列特性： target（DOM 對(duì)象，被更新的節(jié)點(diǎn)）、id、text、iconCls、checked、等等。
enableDnd	none	啟用拖放功能。
disableDnd	none	禁用拖放功能。
beginEdit	nodeEl	開始編輯節(jié)點(diǎn)。
endEdit	nodeEl	結(jié)束編輯節(jié)點(diǎn)。
cancelEdit	nodeEl	取消編輯節(jié)點(diǎn)。