树（Tree）可以在一个空的 <ul> 元素中定义，可使用 javascript 加载数据。

在body中添加ul标签

<ulid="tt"></ul>

然后在使用javascript代码加载数据

使用JSON加载数据

$('#tt').tree({url:'treedata.json'});树的数据格式（Tree Data Format）

每个节点可以包括下列属性：

id：节点的 id，它对于加载远程数据很重要。

text：要显示的节点文本。

state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。

checked：指示节点是否被选中。

attributes：给一个节点添加的自定义属性。

children：定义了一些子节点的节点数组。

数据格式示例：

[{"id":1,"text":"Folder1","iconCls":"icon-save","children":[{"text":"File1","checked":true}]}]事件

很多事件的回调函数需要 'node' 参数，它包括下列属性：

id：绑定到节点的标识值。

text：要显示的文本。

iconCls：用来显示图标的 css class。

checked：节点是否被选中。

state：节点状态，'open' 或 'closed'。

attributes：绑定到节点的自定义属性。

target：目标的 DOM 对象。

JSP+Servlet+JSON树形菜单示例：

数据库表：

数据库表SQL：

CREATETABLE`menu_info`(`menu_id`int(11)NOTNULLauto_increment,`men_menu_id`int(11)defaultNULL,`menu_name`varchar(100)defaultNULL,`menu_url`varchar(500)defaultNULL,`menu_seq`int(11)defaultNULL,`menu_desc`varchar(1000)defaultNULL,`role_mark`varchar(10)defaultNULL,PRIMARYKEY(`menu_id`),KEY`FK_Reference_2`(`men_menu_id`),CONSTRAINT`FK_Reference_2`FOREIGNKEY(`men_menu_id`)REFERENCES`menu_info`(`menu_id`))ENGINE=InnoDBAUTO_INCREMENT=7DEFAULTCHARSET=utf8;--------------------------------Records------------------------------INSERTINTO`menu_info`VALUES('1',null,'系统管理',null,null,null,null);INSERTINTO`menu_info`VALUES('2','1','部门管理',null,null,null,null);INSERTINTO`menu_info`VALUES('3','4','车辆管理',null,null,null,null);INSERTINTO`menu_info`VALUES('4','1','驾驶员管理',null,null,null,null);INSERTINTO`menu_info`VALUES('6','1','人员管理',null,null,null,null);

数据库DAO查询数据：

packagecom.car.system.dao.impl;importjava.sql.Connection;importjava.sql.PreparedStatement;importjava.sql.ResultSet;importjava.util.ArrayList;importjava.util.List;importcom.car.po.MenuInfo;importcom.car.po.UserInfo;importcom.car.system.dao.MenuInfoDAO;importcom.car.utils.DB;publicclassMenuInfoDAOImplimplementsMenuInfoDAO{@OverridepublicList<MenuInfo>getList(){Connectioncon=null;PreparedStatementpre=null;ResultSetres=null;try{Stringsql="select*frommenu_info";con=DB.getDB();pre=con.prepareStatement(sql);res=pre.executeQuery();List<MenuInfo>list=newArrayList<MenuInfo>();while(res.next()){MenuInfomenu=newMenuInfo();menu.setMenuId(res.getInt("menu_id"));menu.setMenuName(res.getString("menu_name"));menu.setPmenuId(res.getInt("men_menu_id"));list.add(menu);}returnlist;}catch(Exceptione){e.printStackTrace();}finally{DB.close(con,pre,res);}returnnull;}}

编写TreeNode类

packagecom.car.po;importjava.util.List;publicclassTreeNode{privateintid;privateStringtext;privateStringurl;privateintpid;privateList<TreeNode>children;publicStringgetUrl(){returnurl;}publicvoidsetUrl(Stringurl){this.url=url;}publicintgetId(){returnid;}publicvoidsetId(intid){this.id=id;}publicStringgetText(){returntext;}publicvoidsetText(Stringtext){this.text=text;}publicintgetPid(){returnpid;}publicvoidsetPid(intpid){this.pid=pid;}publicList<TreeNode>getChildren(){returnchildren;}publicvoidsetChildren(List<TreeNode>children){this.children=children;}}

编写JSON公共转换类

packagecom.car.utils;importjava.util.ArrayList;importjava.util.List;importcom.car.po.TreeNode;publicclassJSON{publicstaticList<TreeNode>buildtree(List<TreeNode>nodes,intid){List<TreeNode>treeNodes=newArrayList<TreeNode>();for(TreeNodetreeNode:nodes){TreeNodenode=newTreeNode();node.setId(treeNode.getId());node.setText(treeNode.getText());node.setUrl(treeNode.getUrl());if(id==treeNode.getPid()){node.setChildren(buildtree(nodes,node.getId()));treeNodes.add(node);}}returntreeNodes;}}

编写Servlet类：

packagecom.car.system.servlet.menuinfo;importjava.io.IOException;importjava.io.PrintWriter;importjava.util.ArrayList;importjava.util.List;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importnet.sf.json.JSONArray;importcom.car.po.MenuInfo;importcom.car.po.TreeNode;importcom.car.system.dao.MenuInfoDAO;importcom.car.system.dao.impl.MenuInfoDAOImpl;importcom.car.utils.JSON;/***ServletimplementationclassMenuInfoServlet*/@WebServlet("/menuInfolist")publicclassMenuInfoServletextendsHttpServlet{privatestaticfinallongserialVersionUID=1L;/***@seeHttpServlet#HttpServlet()*/publicMenuInfoServlet(){super();//TODOAuto-generatedconstructorstub}/***@seeHttpServlet#doGet(HttpServletRequestrequest,HttpServletResponseresponse)*/protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{System.out.println("--------------");this.doPost(request,response);}/***@seeHttpServlet#doPost(HttpServletRequestrequest,HttpServletResponseresponse)*/protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{MenuInfoDAOdao=newMenuInfoDAOImpl();List<MenuInfo>list=dao.getList();List<TreeNode>nodes=newArrayList<TreeNode>();for(MenuInfomenu:list){TreeNodetreeNode=newTreeNode();if(menu.getMenuId()==null){treeNode.setId(0);}else{treeNode.setId(menu.getMenuId());}treeNode.setUrl("http://www.baidu.com");treeNode.setPid(menu.getPmenuId());treeNode.setText(menu.getMenuName());nodes.add(treeNode);}List<TreeNode>treeNodes=JSON.buildtree(nodes,0);JSONArrayjsonArray=JSONArray.fromObject(treeNodes);response.setContentType("text/json");response.setCharacterEncoding("utf-8");PrintWriterout=response.getWriter();out.print(jsonArray);out.flush();out.close();}}

编写Tree.jsp页面

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><%Stringpath=request.getContextPath();StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><basehref="<%=basePath%>"><title>首页</title><linkrel="stylesheet"type="text/css"href="resource/easyui/themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="resource/easyui/themes/icon.css"><scripttype="text/javascript"src="resource/easyui/jquery.min.js"></script><scripttype="text/javascript"src="resource/easyui/jquery.easyui.min.js"></script><scripttype="text/javascript">$().ready(function(){$('#tt').tree({url:'menuInfolist',onContextMenu:function(e,node){e.preventDefault();$('#tt').tree('select',node.target);$('#mm').menu('show',{left:e.pageX,top:e.pageY,onClick:function(item){vartext=item.text;if(item.text=='添加'){alert(node.url);window.mainframe.location="add";}elseif(item.text=='修改'){window.mainframe.location="update";}elseif(item.text=='删除'){window.mainframe.location="delete";}}});}});});</script></head><body><ulid="tt"></ul><divid="mm"class="easyui-menu"><divdata-options="iconCls:'icon-add'">添加</div><divdata-options="iconCls:'icon-edit'">修改</div><divdata-options="iconCls:'icon-remove'">删除</div></div><iframename="mainframe"></iframe></body></html>

效果图：

参考API地址：

tree：http://www.jeasyui.net/plugins/185.html

menu: http://www.jeasyui.net/plugins/163.html