具體代碼如下，注意文字描述部分說明：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>樹tree示例</title>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div class="easyui-panel" title="示例1 綁定json資料的樹" style="width:480px;padding:10px 10px;">
<div>注意json資料中的關鍵鍵名id/text/children/state，分别表示樹節點的id值，顯示文本、子節點組、節點狀态（是否展開）</div>
<div>data-options參數url表示資料來源，animate表示是否采用展開和關閉節點時的動畫效果，lines表示節點間是否采用節點線(更加美觀)</div>
<div id="tree1" class="easyui-tree" data-options="url:'json/tree_data.json',animate:true,lines:true"></div>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getSelected()">擷取選中項</a>
</div>
<div class="easyui-panel" title="示例 帶複選框的tree" style="width:480px;padding:10px 10px;">
<div>注意checkbox:true啟用後，功能非常強大</div>
<div>1,可以選擇多個選項，并可以擷取所有選中項資訊</div>
<div>2,在父節點選中後，子節點會自動全選</div>
<div>3,子節點選中1個以上後，父節點會自動變為部分選中狀态，子節點全部選中後，父節點變為選中狀态</div>
<div id="tree_check" class="easyui-tree" data-options="url:'json/tree_data.json',animate:true,checkbox:true">
</div>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="getChecked()">擷取選中項</a>
</div>
<script type="text/javascript">
function getSelected(){
var node = $('#tree1').tree('getSelected');
if (node){
var id = node.id;
var text=node.text;
alert("id:"+id+" text:"+text);
}
}
function getChecked(){
var nodes = $('#tree_check').tree('getChecked');
var result = '選中項：';
for(var i=0; i<nodes.length; i++){
result += nodes[i].id+","+nodes[i].text+"/";
}
alert(result);
}
</script>
</body>
</html>
最後，要了解tree_data.json檔案中的層級關系，在MyEclipse中編輯json檔案時，可以使用右鍵-【format text】功能自動給json格式化，這樣會好看很多。
[
{
"id":1,
"text":"所有功能",
"children":[
{
"id":11,
"text":"人員管理",
"children":[
{
"id":111,
"text":"添加人員"
},
{
"id":112,
"text":"删除人員"
},
{
"id":113,
"text":"修改人員資訊"
}
]
},
{
"id":12,
"text":"部門管理",
"state":"closed",
"children":[
{
"id":121,
"text":"添加部門"
},
{
"id":122,
"text":"删除部門"
},
{
"id":123,
"text":"Microsoft Office"
},
{
"id":124,
"text":"Games",
"checked":true
}
]
},
{
"id":13,
"text":"權限管理"
},
{
"id":14,
"text":"角色管理"
},
{
"id":15,
"text":"菜單管理"
}
]
}
]
![json擷取資料的三種方式[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)