具体代码如下，注意文字描述部分说明：
<%@ 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":"菜单管理" } ] } ]
