DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery EasyUI API 中文文檔 - Tree樹使用介紹
jQuery EasyUI API 中文文檔 - Tree樹使用介紹
編輯:JQuery特效代碼     
用 $.fn.tree.defaults 重寫了 defaults。

依賴

draggable
droppable
用法

Tree 能在 <ul> 元素裡定義,此標記可以定義為葉節點和子節點。下面是一個示例:

代碼如下:
<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 也可以在一個空的 <ul> 元素裡定義。
<ul id="tt"></ul>
代碼如下:
$('#tt').tree({
url:'tree_data.json'
});

樹數據的格式(Tree data format)
每個節點可以包含下列特性:
id:節點的 id,它對於加載遠程數據很重要。
text:顯示的節點文字。
state:節點狀態, 'open' 或 'closed',默認是 'open'。當設為 'closed' 時,此節點有子節點,並且將從遠程站點加載它們。
checked:指示節點是否被選中。 Indicate whether the node is checked selected.
attributes:給一個節點追加的自定義屬性。
children:定義了一些子節點的節點數組。
示例:
代碼如下:
[{
"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#"
}]
}]

特性

名稱

類型

說明

默認值

url

string

獲取遠程數據的 URL 。

null

method

string

獲取數據的 http method 。

post

animate

boolean

定義當節點展開折疊時是否顯示動畫效果。

false

checkbox

boolean

定義是否在每個節點前邊顯示 checkbox 。

false

cascadeCheck

boolean

定義是否級聯檢查。

true

onlyLeafCheck

boolean

定義是否只在葉節點前顯示 checkbox 。

false

dnd

boolean

定義是否啟用拖放。

false

data

array

加載的節點數據。

null

事件

很多事件的回調函數需要 'node' 函數,它包含下列特性:

  • id:綁定到節點的標識值。
  • text:顯示的文字。
  • checked:是否節點被選中。
  • attributes:綁定到節點的自定義屬性。
  • target:目標的 DOM 對象。

名稱

參數

說明

onClick

node

當用戶點擊一個節點時觸發, node 參數包含下列特性:
id:節點的 id
text:節點的文字
checked:節點是否被選中
attributes:節點自定義屬性
target:被點擊目標的 DOM 對象

onDblClick

node

當用戶雙擊一個節點時觸發。

onBeforeLoad

node, param

當加載數據的請求發出前觸發,返回 false 就取消加載動作。

onLoadSuccess

node, data

當數據加載成功時觸發。

onLoadError

arguments

當數據加載失敗時觸發, arguments 參數與 jQuery.ajax 的'error' 函數一樣。.

onBeforeExpand

node

節點展開前觸發,返回 false 就取消展開動作。

onExpand

node

當節點展開時觸發。

onBeforeCollapse

node

節點折疊前觸發,返回 false 就取消折疊動作。

onCollapse

node

當節點折疊時觸發。

onCheck

node, checked

當用戶點擊 checkbox 時觸發。

onBeforeSelect

node

節點被選中前觸發,返回 false 就取消選擇動作。

onSelect

node

當節點被選中時觸發。

onContextMenu

e, node

當右鍵點擊節點時觸發。

onDrop

target, source, point

當節點被拖拽施放時觸發。
target:DOM 對象,拖放的目標節點。
source:源節點。
point:表示拖放操作,可能是值是: 'append'、'top' 或 'bottom'。

onBeforeEdit

node

編輯節點前觸發。

onAfterEdit

node

編輯節點後觸發。

onCancelEdit

node

當取消編輯動作時觸發。

方法

名稱

參數

說明

options

none

返回樹的 options。

loadData

data

加載樹的數據。

getNode

target

獲取指定的節點對象。

getData

target

獲取指定的節點數據,包括它的子節點。

reload

target

重新加載樹的數據。

getRoot

none

獲取根節點,返回節點對象。

getRoots

none

獲取根節點們,返回節點數組。

getParent

target

獲取父節點, target 參數指節點的 DOM 對象。

getChildren

target

獲取子節點, target 參數指節點的 DOM 對象。

getChecked

none

獲取所有選中的節點。

getSelected

none

獲取選中的節點並返回它,如果沒有選中節點,就返回 null。

isLeaf

target

把指定的節點定義成葉節點, target 參數表示節點的 DOM 對象。

find

id

找到指定的節點並返回此節點對象。

select

target

選中一個節點, target 參數表示節點的 DOM 對象。

check

target

把指定節點設置為勾選。

uncheck

target

把指定節點設置為未勾選。

collapse

target

折疊一個節點, target 參數表示節點的 DOM 對象。

expand

target

展開一個節點, target 參數表示節點的 DOM 對象。

collapseAll

target

折疊所有的節點們。

expandAll

target

展開所有的節點們。

expandTo

target

從指定節點的根部展開。

append

param

追加一些子節點們到一個父節點, param 參數有兩個特性:
parent:DOM 對象,追加到的父節點,如果沒有分配,則追加為根節點。
data:數組,節點們的數據。

toggle

target

切換節點的展開/折疊狀態, target 參數表示節點的 DOM 對象。

insert

param

在指定節點的前邊或後邊插入一個節點, param 參數包含下列特性:
before:DOM 對象,前邊插入的節點。
after:DOM 對象,後邊插入的節點。
data:對象,節點數據。

remove

target

移除一個節點和它的子節點們, target 參數表示節點的 DOM 對象。

pop

target

彈出一個節點和它的子節點們,此方法和 remove 一樣,但是返回了移除的節點數據。

update

param

跟心指定的節點, param 參數有下列特性:
target(DOM 對象,被更新的節點)、id、text、iconCls、checked、等等。

enableDnd

none

啟用拖放功能。

disableDnd

none

禁用拖放功能。

beginEdit

nodeEl

開始編輯節點。

endEdit

nodeEl

結束編輯節點。

cancelEdit

nodeEl

取消編輯節點。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved