一、EasyUI使用標記創建樹形菜單
一個樹形菜單（Tree）可以從標記創建。easyui 樹形菜單（Tree）也可以定義在 <ul> 元素中。無序列表的 <ul> 元素提供一個基礎的樹（Tree）結構。每一個 <li> 元素將產生一個樹節點，子 <ul> 元素將產生一個父樹節點。
創建樹形菜單（Tree）
<ul class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub Folder 1</span> <ul> <li><span>File 11</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>
二、EasyUI創建異步樹形菜單
為了創建異步的樹形菜單（Tree），每一個樹節點必須要有一個 'id' 屬性，這個將提交回服務器去檢索子節點數據。
創建樹形菜單（Tree）
<ul id="tt" class="easyui-tree" url="tree2_getdata.php"> </ul>
服務器端代碼
$id = isset($_POST['id']) ? intval($_POST['id']) : 0; include 'conn.php'; $result = array(); $rs = mysql_query("select * from nodes where parentId=$id"); while($row = mysql_fetch_array($rs)){ $node = array(); $node['id'] = $row['id']; $node['text'] = $row['name']; $node['state'] = has_child($row['id']) ? 'closed' : 'open'; array_push($result,$node); } echo json_encode($result); function has_child($id){ $rs = mysql_query("select count(*) from nodes where parentId=$id"); $row = mysql_fetch_array($rs); return $row[0] > 0 ? true : false; } 三、EasyUI樹形菜單添加節點
本節向您展示如何附加節點到樹形菜單（Tree）。我們將創建一個包含水果和蔬菜節點的食品樹，然后添加一些其他水果到已存在的水果節點。
創建食品樹
首先，我們創建食品樹，代碼如下所示：
<div style="width:200px;height:auto;border:1px solid #ccc;"> <ul id="tt" class="easyui-tree" url="tree_data.json"></ul> </div>
請注意，樹（Tree)組件是定義在 <ul> 標記中，樹節點數據從 URL "tree_data.json" 加載。
得到父節點
然后我們通過點擊節點選擇水果節點，我們將添加一些其他的水果數據。執行 getSelected 方法得到處理節點：
var node = $('#tt').tree('getSelected');
getSelected 方法的返回結果是一個 javascript 對象，它有一個 id、text、target 屬性。target 屬性是一個 DOM 對象，引用選中節點，它的 append 方法將用于附加子節點。
附加節點
var node = $('#tt').tree('getSelected'); if (node){ var nodes = [{ "id":13, "text":"Raspberry" },{ "id":14, "text":"Cantaloupe" }]; $('#tt').tree('append', { parent:node.target, data:nodes }); } 當添加一些水果，您將看見：
正如您所看到的，使用 easyui 的樹（Tree）插件去附加節點不是那么的難。
四、EasyUI創建帶復選框的樹形菜單
easyui 的樹（Tree）插件允許您創建一個復選框樹。如果您點擊一個節點的復選框，這個點擊的節點信息將向上和向下繼承。例如：點擊 'tomato' 節點的復選框，您將會看見 'Vegetables' 節點現在僅僅選中部分。
創建復選框樹
<ul id="tt" class="easyui-tree" url="data/tree_data.json" checkbox="true"></ul>
五、EasyUI樹形菜單拖放控制
當在一個應用中使用樹（Tree）插件，拖拽（drag）和放置（drop）功能要求允許用戶改變節點位置。啟用拖拽（drag）和放置（drop）操作，所有您需要做的就是把樹（Tree）插件的 'dnd' 屬性設置為 true。
創建樹形菜單（Tree）
$('#tt').tree({ dnd: true, url: 'tree_data.json'}); 當在一個樹節點上發生放置操作，'onDrop' 事件將被觸發，您應該做一些或更多的操作，例如保存節點狀態到遠程服務器端，等等。
onDrop: function(targetNode, source, point){ var targetId = $(target).tree('getNode', targetNode).id; $.ajax({ url: '...', type: 'post', dataType: 'json', data: { id: source.id, targetId: targetId, point: point } });} 六、EasyUI樹形菜單加載父/子節點
通常表示一個樹節點的方式就是在每一個節點存儲一個 parentid。 這個也被稱為鄰接列表模型。 直接加載這些數據到樹形菜單（Tree）是不允許的。 但是我們可以在加載樹形菜單之前，把它轉換為標準標準的樹形菜單（Tree）數據格式。 樹（Tree）插件提供一個 'loadFilter' 選項函數，它可以實現這個功能。 它提供一個機會來改變任何一個進入數據。 本教程向您展示如何使用 'loadFilter' 函數加載父/子節點到樹形菜單（Tree）。
父/子節點數據
[{"id":1,"parendId":0,"name":"Foods"},{"id":2,"parentId":1,"name":"Fruits"},{"id":3,"parentId":1,"name":"Vegetables"},{"id":4,"parentId":2,"name":"apple"},{"id":5,"parentId":2,"name":"orange"},{"id":6,"parentId":3,"name":"tomato"},{"id":7,"parentId":3,"name":"carrot"},{"id":8,"parentId":3,"name":"cabbage"},{"id":9,"parentId":3,"name":"potato"},{"id":10,"parentId":3,"name":"lettuce"}]使用 'loadFilter' 創建樹形菜單（Tree）$('#tt').tree({ url: 'data/tree6_data.json', loadFilter: function(rows){ return convert(rows); }}); 轉換的實現
function convert(rows){ function exists(rows, parentId){ for(var i=0; i<rows.length; i++){ if (rows[i].id == parentId) return true; } return false; } var nodes = []; // get the top level nodes for(var i=0; i<rows.length; i++){ var row = rows[i]; if (!exists(rows, row.parentId)){ nodes.push({ id:row.id, text:row.name }); } } var toDo = []; for(var i=0; i<nodes.length; i++){ toDo.push(nodes[i]); } while(toDo.length){ var node = toDo.shift(); // the parent node // get the children nodes for(var i=0; i<rows.length; i++){ var row = rows[i]; if (row.parentId == node.id){ var child = {id:row.id,text:row.name}; if (node.children){ node.children.push(child); } else { node.children = [child]; } toDo.push(child); } } } return nodes;} 以上就是關于EasyUI創建樹形菜單的基本操作方法，希望大家可以學以致用，真正的掌握其中的技巧。
