easyUI前端框架tree（树）后台实现（树形菜单⼀）——java easyUI前端框架tree（树）后台实现（树形菜单⼀）——java
利⽤tree需要实现的效果图
⼯具
eclipse/MySQL数据库
⽤法
树（tree）定义在 ul 元素中。该标记可定义叶节点和⼦节点。节点将是 ul 列表内的 li元素。
需要⽤到的jar包
静态⽅法⽣成树
案例效果：
代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录后的主界⾯</title>
<!--导⼊css  -->
<!--全局样式  -->
<link rel="stylesheet" type="text/css" href="${tPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css"> <!--定义图标  -->
<link rel="stylesheet" type="text/css" href="${tPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">
<!--导⼊js  -->
<script type="text/javascript" src="${tPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!--组件库源码的js⽂件  -->
<script type="text/javascript" src="${tPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${tPath }/static/js/index1.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',border:false" >美⾷⽹站管理系统</div>
<div data-options="region:'west',split:true,title:'West'" >
<div class="easyui-panel" >
<ul class="easyui-tree">
<li>
<span>My Documents</span>
<ul>
<li data-options="state:'closed'">
<span>Photos</span>
<ul>
<li>
<span>Friend</span>
</li>
<li>
<span>Wife</span>
</li>
<li>
<span>Company</span>
</li>
</ul>
</li>
<li>
<span>Program Files</span>
<ul>
<li>Intel</li>
<li>Java</li>
<li>Microsoft Office</li>
jquery源码在线<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
</div>
<div data-options="region:'east',split:true,collapsed:true,title:'East'" >east region</div>
<div data-options="region:'south',border:false" >south region</div>
<div data-options="region:'center',title:'Center'"></div>
</body>
</html>
缺点： 如果树形结构复杂，层级较多，那么c:foreach以及c:if嵌套就会⽐较多，不⽅便编码
动态⽣成树（提供json数据格式来渲染出树）
⽅法：通过java代码以及Jackson的jar包来⽣产对应格式的数据
先写⼀个js⽂件（index.js）:
index.js记得放在js⽂件夹下：
index.js源码：
$(function(){
$('#tt').tree({
url:'tree_data1.json'
});
})
案例及代码实现
根据easyUI的官⽅⽂档对应的结构节点建⽴的实体类(TreeVo.java)
每个节点都具备以下属性：
id：节点ID，对加载远程数据很重要。
text：显⽰节点⽂本。
state：节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不⾃动展开该节点。checked：表⽰该节点是否被选中。
attributes: 被添加到节点的⾃定义属性。
children: ⼀个节点数组声明了若⼲节点。
package com.xiaoqing.vo;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
/**
*
* @author 晴sister
*
* i.csdn/#/uc/profile
*/
public class TreeVo<T>{
/**
* 节点ID
*/
private String id;
/**
* 显⽰节点⽂本
*/
private String text;
/
**
* 节点状态，open closed
*/
private Map<String, Object> state;
/**
* 节点是否被选中true false
*/
private boolean checked =false;
/**
* 节点属性
*/
private Map<String, Object> attributes;
/**
* 节点的⼦节点
*/
private List<TreeVo<T>> children = new ArrayList<TreeVo<T>>();
/**
* ⽗ID
*/
private String parentId;
/**
* 是否有⽗节点
*/
private boolean hasParent =false;
/**
* 是否有⼦节点
*/
private boolean hasChildren =false;
public String getId(){
return id;
}
public void setId(String id){
this.id =id;
}
public String getText(){
return text;
}
public void setText(String text){
< = text;
}
public Map<String, Object> getState(){
return state;
}
public void setState(Map<String, Object> state){
this.state = state;
}
public boolean isChecked(){
return checked;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。