EasyUI –tree、combotree學習總結

EasyUI –tree、combotree學習總結

 

1、   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', '');        // 清除過濾器

2、下拉樹（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);