JQuery Easy Ui （Tree樹）詳解（轉）

第一講：JQuery Easy Ui到底是什么呢？

首先咱們知道JQuery是對Java Script的封裝，是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。。

JQuery ui是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。

那么JQuery Easy Ui到底是什么呢？

我的理解就是比JQuery ui更強大，同樣都是實現絢麗的多功能效果！

jQuery Easy UI的目的就是幫助Web開發者更輕松的打造出功能更豐富並且更美觀的UI界面。

當然JQuery Easy ui提供了用於創建跨瀏覽器網頁的完整的組件集合，

包括功能強大的 datagrid（數據網格）、treegrid（樹形表格）、 panel（面板）、combo（下拉組合）等等。

用戶可以組合使用這些組件，也可以單獨使用其中一個。

其實就這么簡單，對某個事物的定義，個人感覺沒有什么固定的答案，只是那種答案更方便你的記憶，

你記住的，它存在你深深的腦海里的，便是答案！

JQuery Easy Ui插件列表如下：

分類	插件
Base（基礎）	Parser 解析器 Easyloader 加載器 Draggable 可拖動 Droppable 可放置 Resizable 可調整尺寸 Pagination 分頁 Searchbox 搜索框 Progressbar 進度條 Tooltip 提示框
Layout（布局）	Panel 面板 Tabs 標簽頁/選項卡 Accordion 折疊面板 Layout 布局
Menu（菜單）與 Button（按鈕）	Menu 菜單 Linkbutton 鏈接按鈕 Menubutton 菜單按鈕 Splitbutton 分割按鈕
Form（表單）	Form 表單 Validatebox 驗證框 Combo 組合 Combobox 組合框 Combotree 組合樹 Combogrid 組合網格 Numberbox 數字框 Datebox 日期框 Datetimebox 日期時間框 Calendar 日歷 Spinner 微調器 Numberspinner 數值微調器 Timespinner 時間微調器 Slider 滑塊
Window（窗口）	Window 窗口 Dialog 對話框 Messager 消息框
DataGrid（數據網格）與 Tree（樹）	Datagrid 數據網格 Propertygrid 屬性網格 Tree 樹 Treegrid 樹形網格

但是今天咱們只針對Tree（樹）連接數據進行講解！

下面是它的一些基本的屬性：

id: 綁定到節點的標識值；

text:顯示文本；

iconCls: 顯示icon的css樣式；

checked: 節點是否選中；

state: 節點狀態, 'open' 或者 'closed'；

attributes: 綁定到節點的自定義屬性；

target: 目標 DOM 對象；

children: 一個節點數組,定義一些子節點。

特性

名稱	類型	說明	默認值
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

事件

名稱	參數	說明
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	取消編輯節點。