EasyUI –tree、combotree學習總結

EasyUI –tree、combotree學習總結

 

一、   tree總結

（一）、tree基本使用

tree控件是web頁面中將數據分層一樹形結構顯示的。

使用$.fn.tree.defaults重寫默認值對象。

tree控件在頁面上以<ul></ul>標簽標識。

例如：

1. <ul id="tt" class="easyui-tree">  
2.     <li>  
3.         <span>Folder</span>  
4.         <ul>  
5.             <li>  
6.                 <span>Sub Folder 1</span>  
7.                 <ul>  
8.                     <li>  
9.                         <span><a href="#">File 11</a></span>  
10.                     </li>  
11.                     <li>  
12.                         <span>File 12</span>  
13.                     </li>  
14.                     <li>  
15.                         <span>File 13</span>  
16.                     </li>  
17.                 </ul>  
18.             </li>  
19.             <li>  
20.                 <span>File 2</span>  
21.             </li>  
22.             <li>  
23.                 <span>File 3</span>  
24.             </li>  
25.         </ul>  
26.     </li>  
27.     <li>  
28.         <span>File21</span>  
29.     </li>  
30. </ul>  

 

樹控件也可以定義在一個空<ul>元素中並使用Javascript加載數據。

1. <ul id="tt"></ul>  
2. $('#tt').tree({   
3.     url:'tree_data.json'  
4. });  

 

(二)tree屬性

該控件的每一個節點都有如下屬性：

id：節點ID，對加載遠程數據很重要。

text：顯示節點文本。

state：節點狀態，'open' 或 'closed'，默認：'open'。如果為'closed'的時候，將不自動展開該節點。

checked：表示該節點是否被選中。

attributes: 被添加到節點的自定義屬性。

children: 一個節點數組聲明了若干節點。

控件屬性：

屬性名	屬性值類型	描述	默認值
url	string	檢索遠程數據的URL地址。	null
method	string	檢索數據的HTTP方法。（POST / GET）	post
animate	boolean	定義節點在展開或折疊的時候是否顯示動畫效果。	false
checkbox	boolean	定義是否在每一個借點之前都顯示復選框。	false
cascadeCheck	boolean	定義是否層疊選中狀態。	true
onlyLeafCheck	boolean	定義是否只在末級節點之前顯示復選框。	false
lines	boolean	定義是否顯示樹控件上的虛線。	false
dnd	boolean	定義是否啟用拖拽功能。	false
data	array	節點數據加載。 $('#tt').tree({         data: [{                  text: 'Item1',                  state: 'closed',                  children: [{                          text: 'Item11'                  },{                          text: 'Item12'                  }]         },{                  text: 'Item2'         }] });	null
queryParams	object	在請求遠程數據的時候增加查詢參數並發送到服務器。（該屬性自1.4版開始可用）	{}
formatter	function(node)	定義如何渲染節點的文本。 代碼示例： $('#tt').tree({         formatter:function(node){                  return node.text;         } });	false
filter	function(q,node)	定義如何過濾本地展示的數據，返回true將允許節點進行展示。（該屬性自1.4.2版開始可用）	json loader
loader	function(param,success,error)	定義如何從遠程服務器加載數據。返回false可以忽略本操作。該函數具備以下參數： param：發送到遠程服務器的參數對象。 success(data)：當檢索數據成功的時候調用的回調函數。 error()：當檢索數據失敗的時候調用的回調函數。	json loader
loadFilter	function(data,parent)	返回過濾過的數據進行展示。返回數據是標准樹格式。該函數具備以下參數： data：加載的原始數據。 parent: DOM對象，代表父節點。

事件：

事件名	事件參數	描述
onClick	node	在用戶點擊一個節點的時候觸發。 代碼示例：  $('#tt').tree({         onClick: function(node){                  alert(node.text);  // 在用戶點擊的時候提示         } });
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	在節點折疊的時候觸發。
onBeforeCheck	node, checked	在用戶點擊勾選復選框之前觸發，返回false可以取消選擇動作。（該事件自1.3.1版開始可用）
onCheck	node, checked	在用戶點擊勾選復選框的時候觸發。
onBeforeSelect	node	在用戶選擇一個節點之前觸發，返回false可以取消選擇動作。
onSelect	node	在用戶選擇節點的時候觸發。
onContextMenu	e, node	在右鍵點擊節點的時候觸發。 代碼示例：  // 右鍵點擊節點並顯示快捷菜單 $('#tt').tree({         onContextMenu: function(e, node){                  e.preventDefault();                  // 查找節點                  $('#tt').tree('select', node.target);                  // 顯示快捷菜單                  $('#mm').menu('show', {                          left: e.pageX,                          top: e.pageY                  });         } });   // 右鍵菜單定義如下： <div id="mm" class="easyui-menu" style="width:120px;">         <div onclick="append()" data-options="iconCls:'icon-add'">追加</div>         <div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div> </div>
onBeforeDrag	node	在開始拖動節點之前觸發，返回false可以拒絕拖動。（該事件自1.3.2版開始可用）
onStartDrag	node	在開始拖動節點的時候觸發。（該事件自1.3.2版開始可用）
onStopDrag	node	在停止拖動節點的時候觸發。（該事件自1.3.2版開始可用）
onDragEnter	target, source	在拖動一個節點進入到某個目標節點並釋放的時候觸發，返回false可以拒絕拖動。 target：釋放的目標節點元素。 source：開始拖動的源節點。 （該事件自1.3.2版開始可用）
onDragOver	target, source	在拖動一個節點經過某個目標節點並釋放的時候觸發，返回false可以拒絕拖動。 target：釋放的目標節點元素。 source：開始拖動的源節點。 （該事件自1.3.2版開始可用）
onDragLeave	target, source	在拖動一個節點離開某個目標節點並釋放的時候觸發，返回false可以拒絕拖動。 target：釋放的目標節點元素。 source：開始拖動的源節點。 （該事件自1.3.2版開始可用）
onBeforeDrop	target, source, point	在拖動一個節點之前觸發，返回false可以拒絕拖動。 target：釋放的目標節點元素。 source：開始拖動的源節點。 point：表示哪一種拖動操作，可用值有：'append','top' 或 'bottom'。 （該事件自1.3.3版開始可用）
onDrop	target, source, point	當節點位置被拖動時觸發。 target：DOM對象，需要被拖動動的目標節點。 source：源節點。 point：表示哪一種拖動操作，可用值有：'append','top' 或 'bottom'。
onBeforeEdit	node	在編輯節點之前觸發。
onAfterEdit	node	在編輯節點之后觸發。
onCancelEdit	node	在取消編輯操作的時候觸發。

方法：

方法名	方法參數	描述
options	none	返回樹控件屬性。
loadData	data	讀取樹控件數據。
getNode	target	獲取指定節點對象。
getData	target	獲取指定節點數據，包含它的子節點。
reload	target	重新載入樹控件數據。
getRoot	nodeEl	獲取通過“nodeEl”參數指定的節點的頂部父節點元素。（該方法自1.4版開始可用）
getRoots	none	獲取所有根節點，返回節點數組。
getParent	target	獲取父節點，'target'參數代表節點的DOM對象。
getChildren	target	獲取所有子節點，'target'參數代表節點的DOM對象。
getChecked	state	獲取所有選中的節點。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，將返回'checked'節點。 代碼示例： var nodes = $('#tt').tree('getChecked');       // get checked nodes var nodes = $('#tt').tree('getChecked', 'unchecked');    // 獲取未選擇節點 var nodes = $('#tt').tree('getChecked', 'indeterminate');          // 獲取不確定的節點 譯者注：（1.3.4新增獲取方式） var nodes = $('#tt').tree('getChecked', ['unchecked','indeterminate']);
getSelected	none	獲取選擇節點並返回它，如果未選擇則返回null。
isLeaf	target	判斷指定的節點是否是葉子節點，target參數是一個節點DOM對象。
find	id	查找指定節點並返回節點對象。 代碼示例：  // 查找一個節點並選擇它 var node = $('#tt').tree('find', 12); $('#tt').tree('select', node.target);
select	target	選擇一個節點，'target'參數表示節點的DOM對象。
check	target	選中指定節點。
uncheck	target	取消選中指定節點。
collapse	target	折疊一個節點，'target'參數表示節點的DOM對象。
expand	target	展開一個節點，'target'參數表示節點的DOM對象。在節點關閉或沒有子節點的時候，節點ID的值(名為'id'的參數)將會發送給服務器 請求子節點的數據。
collapseAll	target	折疊所有節點。
expandAll	target	展開所有節點。
expandTo	target	打開從根節點到指定節點之間的所有節點。
scrollTo	target	滾動到指定節點。（該方法自1.3.4版開始可用）
append	param	追加若干子節點到一個父節點，param參數有2個屬性： parent：DOM對象，將要被追加子節點的父節點，如果未指定，子節點將被追加至根節點。 data：數組，節點數據。 代碼示例： // 追加若干個節點並選中他們 var selected = $('#tt').tree('getSelected'); $('#tt').tree('append', {           parent: selected.target,           data: [{                    id: 23,                    text: 'node23'           },{                    text: 'node24',                    state: 'closed',                    children: [{                              text: 'node241'                    },{                              text: 'node242'                    }]           }] });
toggle	target	打開或關閉節點的觸發器，target參數是一個節點DOM對象。
insert	param	在一個指定節點之前或之后插入節點，'param'參數包含如下屬性： before：DOM對象，在某個節點之前插入。 after：DOM對象，在某個節點之后插入。 data：對象，節點數據。 下面的代碼展示了如何將一個新節點插入到選擇的節點之前： var node = $('#tt').tree('getSelected'); if (node){           $('#tt').tree('insert', {                    before: node.target,                    data: {                              id: 21,                              text: 'node text'                    }           }); } 譯者注：（1.3.4新增獲取方式） var node = $('#tt').tree('getSelected'); if (node){           $('#tt').tree('insert', {                    before: node.target,                    data: [{                        id: 23,                        text: 'node23'                           },{                     text: 'node24',                               state: 'closed',                        children: [{                              text: 'node241'                        },{                              text: 'node242'                        }]                           }]           }); }
remove	target	移除一個節點和它的子節點，'target'參數是該節點的DOM對象。
pop	target	移除一個節點和它的子節點，該方法跟remove方法一樣，不同的是它將返回被移除的節點數據。
update	param	更新指定節點。'param'參數包含以下屬性： target(DOM對象，將被更新的目標節點)，id，text，iconCls，checked等。 代碼示例： // 更新選擇的節點文本 var node = $('#tt').tree('getSelected'); if (node){           $('#tt').tree('update', {                    target: node.target,                    text: 'new text'           }); }
enableDnd	none	啟用拖拽功能。
disableDnd	none	禁用拖拽功能。
beginEdit	target	開始編輯一個節點。
endEdit	target	結束編輯一個節點。
cancelEdit	target	取消編輯一個節點。
doFilter	text	過濾操作，和filter屬性功能類似。（該方法自1.4.2版開始可用） 代碼示例： $('#tt').tree('doFilter', 'easyui'); $('#tt').tree('doFilter', '');        // 清除過濾器

二、下拉樹（combotree）

擴展自$.fn.combo.defaults和$.fn.tree.defaults。使用$.fn.combotree.defaults重寫默認值對象。

注意：是能夠使用combo中和tree中的方法。

用法：

用<select>標簽創建控件

1. <select id="cc" class="easyui-combotree" style="width:200px;"  
2.         data-options="url:'get_data.php',required:true"></select>  

屬性：

樹形下拉框屬性擴展自combo(自定義下拉框)和tree(樹形控件)，樹形下拉框重寫的屬性如下：（以前默認值為true）

屬性名	屬性值類型	描述	默認值
editable	boolean	定義用戶是否可以直接輸入文本到字段中。	false

 

方法：

樹形下拉框方法擴展自combo(自定義下拉框)，樹形下拉框新增和重寫的方法如下：

方法名	方法參數	描述
options	none	返回屬性對象。
tree	none	返回樹形對象。以下的例子顯示了如何得到選擇的樹節點。 var t = $('#cc').combotree('tree');  // 獲取樹對象 var n = t.tree('getSelected');                  // 獲取選擇的節點 alert(n.text);
loadData	data	讀取本地樹形數據。 代碼示例： $('#cc').combotree('loadData', [{           id: 1,           text: 'Languages',           children: [{                    id: 11,                    text: 'Java'           },{                    id: 12,                    text: 'C++'           }] }]);
reload	url	再次請求遠程樹數據。通過'url'參數重寫原始URL值。
clear	none	清空控件的值。
setValues	values	設置組件值數組。  代碼示例： $('#cc').combotree('setValues', [1,3,21]);//1，3，21代表id為1，3，21
setValue	value	設置組件值。 代碼示例： $('#cc').combotree('setValue', 6);