碼上歡樂
相關內容    簡體    繁體

Jquery easyui tree的使用

本文轉載自   查看原文   2015-12-03 11:46   7867    JAVASCRIPT/ Jquery

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

后台需要返回與格式匹配的json數據才能正確加載樹。

頁面定義一個ui：

 

[html]  view plain copy print ?
 
  1. <ul id="messageInfoAddTree" class="easyui-tree" checkbox="true" data-options="lines:true" style="height:94%"></ul>  

JS訪問后台：

[javascript]  view plain copy print ?
 
  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 print ?
 
  1. public class EmployeeTree {  
  2.     private Integer id;  //人員編號  
  3.     private String text; //人員名稱  
  4.     private Boolean checked = false; //是否選中  
  5.     private List<EmployeeTree> children; //子節點  
  6. }  

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

 

獲取已勾選的節點數據：

 

[javascript]  view plain copy print ?
 
  1. var nodes = $('#messageInfoAddTree').tree('getChecked');  

 

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

check target 選中指定節點。

那我們只能是選中根節點后，實現全選。

 

 

getRoot none 獲取根節點，返回節點對象。

全選：

 

 

[javascript]  view plain copy print ?
 
  1. var root = $('#messageInfoAddTree').tree('getRoot');  
  2. $("#messageInfoAddTree").tree('check',root.target);  

取消選擇：

 

 

[javascript]  view plain copy print ?
 
  1. var root = $('#messageInfoAddTree').tree('getRoot');  
  2. $("#messageInfoAddTree").tree('uncheck',root.target);  



Jquery easyui tree Api：

 

 

Tree（樹）

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

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

 

依賴關系

使用案例

樹控件使用<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 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 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 取消編輯一個節點。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Jquery easyui tree的使用 jQuery EasyUI tree的 使用 Jquery easyui Tree的簡單使用 JQuery EasyUI Tree JQuery EasyUI 數據樹控件（Tree）的簡單使用實例 Jquery EasyUI Tree .net實例 easyui tree loadFilter的使用 EasyUI Tree的簡單使用 EasyUI-Tree的使用 easyui tree的簡單使用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM