天天看點
傳回

【Jquery easyui 】Jquery easyui tree的使用

這個ui用的一切都是json資料。樹也是如此！

背景需要傳回與格式比對的json資料才能正确加載樹。

頁面定義一個ui：

[html]  view plain  copy

  1. <ul id="messageInfoAddTree" class="easyui-tree" checkbox="true" data-options="lines:true" style="height:94%"></ul>  

JS通路背景：

[javascript]  view plain  copy

  1. //人員樹  
  2.     $('#messageInfoAddTree').tree({      
  3.         url: "controller/crmMessageInfo/selectEditTree.json?rid=-1",  
  4.         loadFilter: function(data){     
  5.             return data;        
  6.         }       
  7.     });   

背景實體Bean中需要的屬性：

[java]  view plain  copy

  1. public class EmployeeTree {  
  2.     private Integer id;  //人員編号  
  3.     private String text; //人員名稱  
  4.     private Boolean checked = false; //是否選中  
  5.     private List<EmployeeTree> children; //子節點  
  6. }  

按照此種格式填充資料就能得到下面的結果：

【Jquery easyui 】Jquery easyui tree的使用

擷取已勾選的節點資料：

[javascript]  view plain  copy

  1. var nodes = $('#messageInfoAddTree').tree('getChecked');  

還有一個功能，就是讓tree的所有節點都勾選上或者取消勾選，在api中找了一下有一個方法：

check target 選中指定節點。

那我們隻能是選中根節點後，實作全選。

getRoot none 擷取根節點，傳回節點對象。

全選：

[javascript]  view plain  copy

  1. var root = $('#messageInfoAddTree').tree('getRoot');  
  2. $("#messageInfoAddTree").tree('check',root.target);  

取消選擇：

[javascript]  view plain  copy

  1. var root = $('#messageInfoAddTree').tree('getRoot');  
  2. $("#messageInfoAddTree").tree('uncheck',root.target);  

Jquery easyui tree Api：

Tree（樹）

使用$.fn.tree.defaults重寫預設值對象。

樹控件在web頁面中一個将分層資料以樹形結構進行顯示。它提供使用者展開、折疊、拖拽、編輯和異步加載等功能。

依賴關系

  • draggable
  • droppable

使用案例

樹控件使用<ul>元素定義。标簽能夠定義分支和子節點。節點都定義在<ul>清單内的<li>元素中。以下顯示的元素将被用作樹節點嵌套在<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>  
  1. $('#tt').tree({   
  2.     url:'tree_data.json'  
  3. });  

使用loadFilter函數處理來自Web Services的JSON資料。

  1. $('#tt').tree({   
  2.     url: ...,   
  3.     loadFilter: function(data){   
  4.         if (data.d){   
  5.             return data.d;   
  6.         } else {   
  7.             return data;   
  8.         }   
  9.     }   
  10. });  

樹控件資料格式化

每個節點都具備以下屬性：

  • id：節點ID，對加載遠端資料很重要。
  • text：顯示節點文本。
  • state：節點狀态，'open' 或 'closed'，預設：'open'。如果為'closed'的時候，将不自動展開該節點。
  • checked：表示該節點是否被選中。
  • attributes: 被添加到節點的自定義屬性。
  • children: 一個節點數組聲明了若幹節點。

一些案例：

  1. [{   
  2.     "id":1,   
  3.     "text":"Folder1",   
  4.     "iconCls":"icon-save",   
  5.     "children":[{   
  6.         "text":"File1",   
  7.         "checked":true  
  8.     },{   
  9.         "text":"Books",   
  10.         "state":"open",   
  11.         "attributes":{   
  12.             "url":"/demo/book/abc",   
  13.             "price":100   
  14.         },   
  15.         "children":[{   
  16.             "text":"PhotoShop",   
  17.             "checked":true  
  18.         },{   
  19.             "id": 8,   
  20.             "text":"Sub Bookds",   
  21.             "state":"closed"  
  22.         }]   
  23.     }]   
  24. },{   
  25.     "text":"Languages",   
  26.     "state":"closed",   
  27.     "children":[{   
  28.         "text":"Java"  
  29.     },{   
  30.         "text":"C#"  
  31.     }]   
  32. }]  

異步樹控件

樹控件内建異步加載模式的支援，使用者先建立一個空的樹，然後指定一個伺服器端，執行檢索後動态傳回JSON資料來填充樹并完成異步請求。例子如下：

  1. <ul class="easyui-tree" data-options="url:'get_data.php'"></ul>  

樹控件讀取URL。子節點的加載依賴于父節點的狀态。當展開一個封閉的節點，如果節點沒有加載子節點，它将會把節點id的值作為http請求參數并命名為'id'，通過URL發送到伺服器上面檢索子節點。

下面是從伺服器端傳回的資料。

  1. [{   
  2.     "id": 1,   
  3.     "text": "Node 1",   
  4.     "state": "closed",   
  5.     "children": [{   
  6.         "id": 11,   
  7.         "text": "Node 11"  
  8.     },{   
  9.         "id": 12,   
  10.         "text": "Node 12"  
  11.     }]   
  12. },{   
  13.     "id": 2,   
  14.     "text": "Node 2",   
  15.     "state": "closed"  
  16. }]  

節點1和節點2是封閉的，當展開節點1的時候将直接顯示它的子節點。當展開節點2的時候它将發送值(2)到伺服器擷取子節點。

屬性

屬性名 屬性值類型 描述 預設值
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
formatter function(node)

定義如何渲染節點的文本。

代碼示例：

$('#tt').tree({
	formatter:function(node){
		return node.text;
	}
});
false
loader function(param,success,error)

定義如何從遠端伺服器加載資料。傳回false可以忽略本操作。該函數具備以下參數：

param：發送到遠端伺服器的參數對象。

success(data)：當檢索資料成功的時候調用的回調函數。

error()：當檢索資料失敗的時候調用的回調函數。

 json loader
loadFilter function(data,parent)

傳回過濾過的資料進行展示。傳回資料是标準樹格式。該函數具備以下參數：

data：加載的原始資料。

parent: DOM對象，代表父節點。

事件

很多事件的回調函數都包含'node'參數，其具備如下屬性：

  • id：綁定節點的辨別值。
  • text：顯示的節點文本。
  • iconCls：顯示的節點圖示CSS類ID。
  • checked：該節點是否被選中。
  • state：節點狀态，'open' 或 'closed'。
  • attributes：綁定該節點的自定義屬性。
  • target：目标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 οnclick="append()" data-options="iconCls:'icon-add'">追加</div>
	<div οnclick="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 none 擷取根節點，傳回節點對象。
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 取消編輯一個節點。
前端相關
上一篇: 雜項： EasyUI | jQuery EasyUI特點插件使用的方法事件的使用
下一篇: jQuery --EasyUI

繼續閱讀