轉自：https://blog.csdn.net/ya_1249463314/article/details/70305730
版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/ya_1249463314/article/details/70305730
1.樣式
樹控件在web頁面中一個將分層數據以樹形結構進行顯示。它提供用戶展開、折疊、拖拽、編輯和異步加載等功能。
2.靜態方式生成樹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tree</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<ul id="tt" class="easyui-tree">
<li>
<span>第一章</span>
<ul>
<li>
<span>第一節</span>
<ul>
<li>
<span>第一條</span>
</li>
<li>
<span>第二條</span>
</li>
</ul>
</li>
<li>
<span>第二節</span>
</li>
</ul>
</li>
<li>
<span>第二章</span>
</li>
</ul>
</body>
</html>
結果：
3.動態方式生成樹
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tree02</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<!-- 引入css文件 -->
<link rel="stylesheet" href="themes/default/easyui.css" type="text/css"></link>
<link rel="stylesheet" href="themes/icon.css" type="text/css"></link>
<!-- 引入js文件 -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/easyui-lang-zh_CN.js"></script>
</head>
<body>
<ul id="treeId">
</ul>
</body>
<script type="text/javascript">
$("#treeId").tree({
url:'/easyUI/json/province.json'
});
</script>
</html>
json文件：province.json
[{
"id":1,
"text":"杭州",
"children":[
{
"text":"下城區",
"checked":true
},
{
"text":"西湖區",
"state":"open",
"children":[
{
"text":"超市",
"checked":true
},
{
"id": 8,
"text":"銀行"
}
]
}
]
},{
"id": 2,
"text":"北京"
}]
結果：
4.文檔
屬性
屬性名 屬性值類型 描述 默認值
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 取消編輯一個節點。
---------------------
作者：sunpy 孫培煜
來源：CSDN
原文：https://blog.csdn.net/ya_1249463314/article/details/70305730
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！