場景

效果

樹（tree）定義在 <ul> 元素中。該標記可定義葉節(jié)點和子節(jié)點。節(jié)點將是 ul 列表內(nèi)的 <li> 元素。

屬性

名稱類型描述默認值

url	string	獲取遠程數(shù)據(jù)的 URL 。	null
method	string	檢索數(shù)據(jù)的 http 方法（method）。	post
animate	boolean	定義當節(jié)點展開折疊時是否顯示動畫效果。	false
checkbox	boolean	定義是否在每個節(jié)點前邊顯示復選框。	false
cascadeCheck	boolean	定義是否級聯(lián)檢查。	true
onlyLeafCheck	boolean	定義是否只在葉節(jié)點前顯示復選框。	false
lines	boolean	定義是否顯示樹線條。	false
dnd	boolean	定義是否啟用拖放。	false
data	array	要加載的節(jié)點數(shù)據(jù)。 $('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }] });	null
formatter	function(node)	定義如何呈現(xiàn)節(jié)點文本。 代碼實例： $('#tt').tree({ formatter:function(node){ return node.text; } });	?
loader	function(param,success,error)	定義如何從遠程服務器加載數(shù)據(jù)。返回 false 則取消該動作。該函數(shù)有下列參數(shù)： param：要傳遞到遠程服務器的參數(shù)對象。 success(data)：當檢索數(shù)據(jù)成功時調(diào)用的回調(diào)函數(shù)。 error()：當檢索數(shù)據(jù)失敗時調(diào)用的回調(diào)函數(shù)。	json loader
loadFilter	function(data,parent)	返回要顯示的過濾數(shù)據(jù)。返回數(shù)據(jù)時以標準樹格式返回的。該函數(shù)有下列參數(shù)： data：要加載的原始數(shù)據(jù)。 parent：DOM 對象，表示父節(jié)點。	?

事件

很多事件的回調(diào)函數(shù)需要 'node' 參數(shù)，它包括下列屬性：

• id：綁定到節(jié)點的標識值。
• text：要顯示的文本。
• iconCls：用來顯示圖標的 css class。
• checked：節(jié)點是否被選中。
• state：節(jié)點狀態(tài)，'open' 或 'closed'。
• attributes：綁定到節(jié)點的自定義屬性。
• target：目標的 DOM 對象。

名稱參數(shù)描述

onClick	node	當用戶點擊一個節(jié)點時觸發(fā)。代碼實例： $('#tt').tree({ onClick: function(node){ alert(node.text); // alert node text property when clicked } });
onDblClick	node	當用戶雙擊一個節(jié)點時觸發(fā)。
onBeforeLoad	node, param	當加載數(shù)據(jù)的請求發(fā)出前觸發(fā)，返回 false 則取消加載動作。
onLoadSuccess	node, data	當數(shù)據(jù)加載成功時觸發(fā)。
onLoadError	arguments	當數(shù)據(jù)加載失敗時觸發(fā)，arguments 參數(shù)與 jQuery.ajax 的 'error' 函數(shù)一樣。
onBeforeExpand	node	節(jié)點展開前觸發(fā)，返回 false 則取消展開動作。
onExpand	node	當節(jié)點展開時觸發(fā)。
onBeforeCollapse	node	節(jié)點折疊前觸發(fā)，返回 false 則取消折疊動作。
onCollapse	node	當節(jié)點折疊時觸發(fā)。
onBeforeCheck	node, checked	當用戶點擊復選框前觸發(fā)，返回 false 則取消該選中動作。該事件自版本 1.3.1 起可用。
onCheck	node, checked	當用戶點擊復選框時觸發(fā)。
onBeforeSelect	node	節(jié)點被選中前觸發(fā)，返回 false 則取消選擇動作。
onSelect	node	當節(jié)點被選中時觸發(fā)。
onContextMenu	e, node	當右鍵點擊節(jié)點時觸發(fā)。代碼實例： // right click node and then display the context menu $('#tt').tree({ onContextMenu: function(e, node){ e.preventDefault(); // select the node $('#tt').tree('select', node.target); // display context menu $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } }); ? // the context menu is defined as below: <div id="mm" class="easyui-menu" style="width:120px;"> <div οnclick="append()" data-options="iconCls:'icon-add'">Append</div> <div οnclick="remove()" data-options="iconCls:'icon-remove'">Remove</div> </div>
onBeforeDrag	node	當節(jié)點的拖拽開始時觸發(fā)，返回 false 則禁止拖拽。該事件自版本 1.3.2 起可用。
onStartDrag	node	當開始拖拽節(jié)點時觸發(fā)。該事件自版本 1.3.2 起可用。
onStopDrag	node	當停止拖拽節(jié)點時觸發(fā)。該事件自版本 1.3.2 起可用。
onDragEnter	target, source	當節(jié)點被拖拽進入某個允許放置的目標節(jié)點時觸發(fā)，返回 false 則禁止放置。 target：被放置的目標節(jié)點元素。 source：被拖拽的源節(jié)點。 該事件自版本 1.3.2 起可用。
onDragOver	target, source	當節(jié)點被拖拽到允許放置的目標節(jié)點上時觸發(fā)，返回 false 則禁止放置。 target：被放置的目標節(jié)點元素。 source：被拖拽的源節(jié)點。 該事件自版本 1.3.2 起可用。
onDragLeave	target, source	當節(jié)點被拖拽離開允許放置的目標節(jié)點時觸發(fā)。 target：被放置的目標節(jié)點元素。 source：被拖拽的源節(jié)點。 該事件自版本 1.3.2 起可用。
onBeforeDrop	target,source,point	節(jié)點被放置之前觸發(fā)，返回 false 則禁止放置。 target：DOM 對象，放置的目標節(jié)點。 source：源節(jié)點。 point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。 該事件自版本 1.3.2 起可用。
onDrop	target,source,point	當節(jié)點被放置時觸發(fā)。 target：DOM 對象，放置的目標節(jié)點。 source：源節(jié)點。 point：表示放置操作，可能的值是：'append'、'top' 或 'bottom'。
onBeforeEdit	node	編輯節(jié)點前觸發(fā)。
onAfterEdit	node	編輯節(jié)點后觸發(fā)。
onCancelEdit	node	當取消編輯動作時觸發(fā)。

方法

名稱參數(shù)描述

options	none	返回樹的選項（options）。
loadData	data	加載樹的數(shù)據(jù)。
getNode	target	獲取指定的節(jié)點對象。
getData	target	獲取指定的節(jié)點數(shù)據(jù)，包括它的子節(jié)點。
reload	target	重新加載樹的數(shù)據(jù)。
getRoot	none	獲取根節(jié)點，返回節(jié)點對象。
getRoots	none	獲取根節(jié)點，返回節(jié)點數(shù)組。
getParent	target	獲取父節(jié)點，target 參數(shù)表示節(jié)點的 DOM 對象。
getChildren	target	獲取子節(jié)點， target 參數(shù)表示節(jié)點的 DOM 對象。
getChecked	state	獲取選中的節(jié)點。狀態(tài)可用值有：'checked'、'unchecked'、'indeterminate'。如果狀態(tài)未分配，則返回 'checked' 節(jié)點。 代碼實例： var nodes = $('#tt').tree('getChecked'); // get checked nodes var nodes = $('#tt').tree('getChecked', 'unchecked'); // get unchecked nodes var nodes = $('#tt').tree('getChecked', 'indeterminate'); // get indeterminate nodes var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']); // get checked and indeterminate nodes
getSelected	none	獲取選中的節(jié)點并返回它，如果沒有選中節(jié)點，則返回 null。
isLeaf	target	把指定的節(jié)點定義成葉節(jié)點，target 參數(shù)表示節(jié)點的 DOM 對象。
find	id	找到指定的節(jié)點并返回該節(jié)點對象。代碼實例： // find a node and then select it var node = $('#tt').tree('find', 12); $('#tt').tree('select', node.target);
select	target	選中一個節(jié)點，target 參數(shù)表示節(jié)點的 DOM 對象。
check	target	把指定節(jié)點設置為勾選。
uncheck	target	把指定節(jié)點設置為未勾選。
collapse	target	折疊一個節(jié)點，target 參數(shù)表示節(jié)點的 DOM 對象。
expand	target	展開一個節(jié)點，target 參數(shù)表示節(jié)點的 DOM 對象。當節(jié)點關閉且沒有子節(jié)點時，節(jié)點的 id 值（名為 'id' 參數(shù)）將被發(fā)送至服務器以請求子節(jié)點數(shù)據(jù)。
collapseAll	target	折疊所有的節(jié)點。
expandAll	target	展開所有的節(jié)點。
expandTo	target	從根部展開一個指定的節(jié)點。
scrollTo	target	滾動到指定節(jié)點。該方法自版本 1.3.4 起可用。
append	param	追加一些子節(jié)點到一個父節(jié)點，param 參數(shù)有兩個屬性： parent：DOM 對象，要追加到的父節(jié)點，如果沒有分配，則追加為根節(jié)點。 data：數(shù)組，節(jié)點的數(shù)據(jù)。 代碼實例： // append some nodes to the selected node 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	切換節(jié)點的展開/折疊狀態(tài)，target 參數(shù)表示節(jié)點的 DOM 對象。
insert	param	在指定節(jié)點的前邊或后邊插入一個節(jié)點，param 參數(shù)包括下列屬性： before：DOM 對象，前邊插入的節(jié)點。 after：DOM 對象，后邊插入的節(jié)點。 data：對象，節(jié)點數(shù)據(jù)。 下面的代碼演示了如何在選中節(jié)點之前插入一個新的節(jié)點： var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('insert', { before: node.target, data: { id: 21, text: 'node text' } }); }
remove	target	移除一個節(jié)點和它的子節(jié)點，target 參數(shù)表示節(jié)點的 DOM 對象。
pop	target	彈出一個節(jié)點和它的子節(jié)點，該方法和 remove 一樣，但是返回了移除的節(jié)點數(shù)據(jù)。
update	param	更新指定的節(jié)點，'param' 參數(shù)有下列屬性： target（DOM 對象，要被更新的節(jié)點）、id、text、iconCls、checked，等等。 代碼實例： // update the selected node text var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('update', { target: node.target, text: 'new text' }); }
enableDnd	none	啟用拖放功能。
disableDnd	none	禁用拖放功能。
beginEdit	target	開始編輯節(jié)點。
endEdit	target	結束編輯節(jié)點。
cancelEdit	target	取消編輯節(jié)點。

實現(xiàn)

使用基本的ul元素構造樹

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <ul id="tt" class="easyui-tree"><li><span>Folder</span><ul><li><span>Sub Folder 1</span><ul><li><span><a href="#">File 11</a></span></li><li><span>File 12</span></li><li><span>File 13</span></li></ul></li><li><span>File 2</span></li><li><span>File 3</span></li></ul></li><li><span>File21</span></li> </ul></body> </html>

使用js加載json數(shù)據(jù)構造樹

每個節(jié)點可以包括下列屬性：

id：節(jié)點的 id，它對于加載遠程數(shù)據(jù)很重要。
text：要顯示的節(jié)點文本。
state：節(jié)點狀態(tài)，'open' 或 'closed'，默認是 'open'。當設置為 'closed' 時，該節(jié)點有子節(jié)點，并且將從遠程站點加載它們。
checked：指示節(jié)點是否被選中。
attributes：給一個節(jié)點添加的自定義屬性。
children：定義了一些子節(jié)點的節(jié)點數(shù)組。

示例代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <ul id="tt" class="easyui-tree"><li><span>Folder</span><ul><li><span>Sub Folder 1</span><ul><li><span><a href="#">File 11</a></span></li><li><span>File 12</span></li><li><span>File 13</span></li></ul></li><li><span>File 2</span></li><li><span>File 3</span></li></ul></li><li><span>File21</span></li> </ul> <ul id="tree2"></ul> <script type="text/javascript">$(function () {$("#tree2").tree({data:[{"id":1,"text":"Folder1","iconCls":"icon-save","children":[{"text":"File1","checked":true},{"text":"Books","state":"open","attributes":{"url":"/demo/book/abc","price":100},"children":[{"text":"PhotoShop","checked":true},{"id": 8,"text":"Sub Bookds","state":"closed"}]}]},{"text":"Languages","state":"closed","children":[{"text":"Java"},{"text":"C#"}]}]})}) </script> </body> </html>

效果

可編輯的樹

設置點擊事件為可以編輯，設置編輯之后的事件為提示節(jié)點內(nèi)容，獲取到節(jié)點內(nèi)容就可以進行ajax提交數(shù)據(jù)等其他操作。

? onClick:function (node) {$(this).tree("beginEdit",node.target);},onAfterEdit:function (node) {alert("編輯后的節(jié)點內(nèi)容為："+node.text)}

完整示例代碼：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <ul id="tt" class="easyui-tree"><li><span>Folder</span><ul><li><span>Sub Folder 1</span><ul><li><span><a href="#">File 11</a></span></li><li><span>File 12</span></li><li><span>File 13</span></li></ul></li><li><span>File 2</span></li><li><span>File 3</span></li></ul></li><li><span>File21</span></li> </ul> <ul id="tree2"></ul> <script type="text/javascript">$(function () {$("#tree2").tree({data:[{"id":1,"text":"Folder1","iconCls":"icon-save","children":[{"text":"File1","checked":true},{"text":"Books","state":"open","attributes":{"url":"/demo/book/abc","price":100},"children":[{"text":"PhotoShop","checked":true},{"id": 8,"text":"Sub Bookds","state":"closed"}]}]},{"text":"Languages","state":"closed","children":[{"text":"Java"},{"text":"C#"}]}],onClick:function (node) {$(this).tree("beginEdit",node.target);},onAfterEdit:function (node) {alert("編輯后的節(jié)點內(nèi)容為："+node.text)}})}) </script> </body> </html>

效果

給樹添加追加與刪除菜單

效果

實現(xiàn)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <ul id="tt" class="easyui-tree"><li><span>Folder</span><ul><li><span>Sub Folder 1</span><ul><li><span><a href="#">File 11</a></span></li><li><span>File 12</span></li><li><span>File 13</span></li></ul></li><li><span>File 2</span></li><li><span>File 3</span></li></ul></li><li><span>File21</span></li> </ul> <ul id="tree2"></ul> <div id="mm" class="easyui-menu" style="width:120px;"><div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div><div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div><div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div> </div> <script type="text/javascript">$(function () {$("#tree2").tree({data:[{"id":1,"text":"Folder1","iconCls":"icon-save","children":[{"text":"File1","checked":true},{"text":"Books","state":"open","attributes":{"url":"/demo/book/abc","price":100},"children":[{"text":"PhotoShop","checked":true},{"id": 8,"text":"Sub Bookds","state":"closed"}]}]},{"text":"Languages","state":"closed","children":[{"text":"Java"},{"text":"C#"}]}],onClick:function (node) {$(this).tree("beginEdit",node.target);},onAfterEdit:function (node) {alert("編輯后的節(jié)點內(nèi)容為："+node.text)},onContextMenu:function (e,node) {//阻止原來的右鍵事件e.preventDefault();$(this).tree("select",node.target);$("#mm").menu("show",{left:e.pageX,top:e.pageY})}})})var id={};function appendNode(){var selected =$("#tree2").tree("getSelected");var node ={parent:selected.target,data:[{id:++id,text:''}]}$("#tree2").tree("append",node);node=$("#tree2").tree("find",id);$("#tree2").tree("beginEdit",node.target);}function insertNode() {var selected =$("#tree2").tree("getSelected");var node={id:++id,text:''}$("#tree2").tree("insert",{after:selected.target,data:node});node=$("#tree2").tree("find",id);$("#tree2").tree("beginEdit",node.target);}function removeNode() {selected =$("#tree2").tree("getSelected");$("#tree2").tree("remove",selected.target);} </script> </body> </html>

拖拽樹效果

設置dnd屬性為true,onDrop事件是拖拽之后的事件。

source能獲取拖拽前的節(jié)點，target能獲取拖拽后的節(jié)點。

?

dnd:true,onDrop:function(target,source,point){alert("原來的節(jié)點："+source.text);alert("新的節(jié)點："+$(this).tree("getNode",target).text)}

完整代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css"><link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css"><script type="text/javascript" src="/easyui/jquery.min.js"></script><script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script> </head> <body> <ul id="tt" class="easyui-tree"><li><span>Folder</span><ul><li><span>Sub Folder 1</span><ul><li><span><a href="#">File 11</a></span></li><li><span>File 12</span></li><li><span>File 13</span></li></ul></li><li><span>File 2</span></li><li><span>File 3</span></li></ul></li><li><span>File21</span></li> </ul> <ul id="tree2"></ul> <div id="mm" class="easyui-menu" style="width:120px;"><div onclick="appendNode()" data-options="iconCls:'icon-add'">Append</div><div onclick="insertNode()" data-options="iconCls:'icon-back'">Insert</div><div onclick="removeNode()" data-options="iconCls:'icon-remove'">Remove</div> </div> <script type="text/javascript">$(function () {$("#tree2").tree({data:[{"id":1,"text":"Folder1","iconCls":"icon-save","children":[{"text":"File1","checked":true},{"text":"Books","state":"open","attributes":{"url":"/demo/book/abc","price":100},"children":[{"text":"PhotoShop","checked":true},{"id": 8,"text":"Sub Bookds","state":"closed"}]}]},{"text":"Languages","state":"closed","children":[{"text":"Java"},{"text":"C#"}]}],onClick:function (node) {$(this).tree("beginEdit",node.target);},onAfterEdit:function (node) {alert("編輯后的節(jié)點內(nèi)容為："+node.text)},onContextMenu:function (e,node) {//阻止原來的右鍵事件e.preventDefault();$(this).tree("select",node.target);$("#mm").menu("show",{left:e.pageX,top:e.pageY})},dnd:true,onDrop:function(target,source,point){alert("原來的節(jié)點："+source.text);alert("新的節(jié)點："+$(this).tree("getNode",target).text)}})})var id={};function appendNode(){var selected =$("#tree2").tree("getSelected");var node ={parent:selected.target,data:[{id:++id,text:''}]}$("#tree2").tree("append",node);node=$("#tree2").tree("find",id);$("#tree2").tree("beginEdit",node.target);}function insertNode() {var selected =$("#tree2").tree("getSelected");var node={id:++id,text:''}$("#tree2").tree("insert",{after:selected.target,data:node});node=$("#tree2").tree("find",id);$("#tree2").tree("beginEdit",node.target);}function removeNode() {selected =$("#tree2").tree("getSelected");$("#tree2").tree("remove",selected.target);} </script> </body> </html>

?

總結

以上是生活随笔為你收集整理的EasyUI中树的基本操作的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。