tree的组件简介
静态的html方式：
缺点：如果树形结构复杂，层级较多，那么c:foreach以及c:if的嵌套就会比较多，不方便编码
通过java代码以及jackson 的jar包来生产对应的格式数据（能够格式这么来）查询数据库，拿到需要的数据
TreeVo，BuildTree
BuildTree核心思想
两个循环
外层循环默认遍历的就是父节点
内层循环默认遍历的就是子节点
只要父节点的id=子节点的父id，那么就是父子关系，子节点的父id，那么子节点就应该添加到父节点的children中
可在D:\java课程\数据库Myserv\1、easyui入门\资料（我自己存放的外置）中找到APl文件
打开jQuery EasyUI 1.5 版 API 中文版 (Made By Richie696)文件，找到如图，查看tree有关资料。
案例1：
无论用不用，先添加了。
在D:\java课程\数据库Myserv\1、easyui入门\资料\jquery-easyui-1.5.1\demo\tree找到一个最基础的布局格式basic.html
在复制它的源代码,
就称下代码代号为1号代码
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<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>
<li>Games</li>
</ul>
</li>
<li>index.html</li>
<li>about.html</li>
<li>welcome.html</li>
</ul>
</li>
</ul>
</div>
放入jsp显示页面里去
运行
如果这些数据来自数据库必须加很多的if条件，你要判断谁到底是谁的父亲，因级别，foreach里要套foreach，有儿子又要套，这样非常麻烦。所以Easyui框架的作者就想到了一个方法，他省略了一个过程，他帮你把这个东西写好了，你直接提供数据就行了，提供他指定格式的数据就可以了。具体他这么实现这里不说，他是通过jquery实现的，想了解可以去csdn找下。本人也不了解。
找到四行代码
他就用这四行代码解决c：foreach 判断，嵌套的一个问题。
用这个代码取代一号代码
1.<ul id="tt"></ul> 等于一号代码的效果
在 D:\java课程\数据库Myserv\1、easyui入门\资料\jquery-easyui-1.5.1\demo\tree 中找到tree_data1.json
创建一个index.js文件
2.$('#tt').tree({
3. url:'tree_data.json'
4. });
用一下语句调用index.js,index.js调用tree_data1.json中的格式
<script type="text/javascript"
src="${pageContext.request.contextPath }/static/js/index.js"></script>
运行结果：
2、tree组件工具类的实现思路
预热
思考：如何从数据库得到数据实现上面效果？
方案
先做一个简单测试来得知如何插入数据：
代码
实体类TreeVo
package com.yinbangchi.vo;
import java.util.ArrayList;
import java.util.List;
public class TreeVo {
private String id;
private String text;
private List<TreeVo> children=new ArrayList<TreeVo>();
private String pid;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public List<TreeVo> getChildren() {
return children;
}
public void setChildren(List<TreeVo> children) {
this.children = children;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public TreeVo() {
super();
}
public TreeVo(String id, String text, String pid) {
super();
this.id = id;
this.text = text;
this.pid = pid;
}
public TreeVo(String id, String text, List<TreeVo> children, String pid) {
super();
this.id = id;
this.text = text;
this.children = children;
this.pid = pid;
}
@Override
public String toString() {
return "TreeVo [id=" + id + ", text=" + text + ", children=" + children + ", pid=" + pid + "]";
}
}
测试类TreeVoTest
package com.yinbangchi.vo;
import java.util.List;
import org.junit.Test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
public class TreeVoTest {
@Test
public void test() throws JsonProcessingException {
TreeVo treeVoOneLevel=new TreeVo("1","my documents","-1");
TreeVo treeVoOneLeve11=new TreeVo("11","photos","1");
TreeVo treeVoOneLeve12=new TreeVo("12","program files","1");
TreeVo treeVoOneLeve13=new TreeVo("13","index.html","1");
TreeVo treeVoOneLeve14=new TreeVo("14","about.html","1");
TreeVo treeVoOneLeve15=new TreeVo("15","welcome.html","1");
List<TreeVo> parent=treeVoOneLevel.getChildren();
parent.add(treeVoOneLeve11);
parent.add(treeVoOneLeve12);
parent.add(treeVoOneLeve13);
parent.add(treeVoOneLeve14);
parent.add(treeVoOneLeve15);
ObjectMapper om=new ObjectMapper();
String jsonStr = om.writeValueAsString(treeVoOneLevel);
System.out.println(jsonStr);
}
}
运行结果：
链接
到这个链接: https://www.sojson.com. （json解析格式化工具）
如图：
代码2：
{
"id": "1", ——父亲
"text": "my documents",
"children": [{
"id": "11",
"text": "photos",——儿子
"children": [],
"pid": "1"
}, {
"id": "12",
"text": "program files",——二儿子
"children": [],
"pid": "1"
}, {
"id": "13",
"text": "index.html",——三儿子
"children": [],
"pid": "1"
}, {
"id": "14",
"text": "about.html",——四儿子
"children": [],
"pid": "1"
}, {
"id": "15",
"text": "welcome.html",——五儿子
"children": [],
"pid": "1"
}],
"pid": "-1"
}
这些数据都是手写，现在正式敲代码。
正式从数据库拿数据写
代码
实体类Permission
package com.yinbangchi.entity;
public class Permission{
private long id;
private String name;
private String description;
private String url;
private long pid;
private int ismenu;
private long displayno;
public long getId() {
return id;
}
public void setId(long id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getUrl() {
return url;
}
public void setUrl(String url) {
this.url = url;
}
public long getPid() {
return pid;
}
public void setPid(long pid) {
this.pid = pid;
}
public int getIsmenu() {
return ismenu;
}
public void setIsmenu(int ismenu) {
this.ismenu = ismenu;
}
public long getDisplayno() {
return displayno;
}
public void setDisplayno(long displayno) {
this.displayno = displayno;
}
public Permission() {
super();
}
public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
this.id = id;
this.name = name;
this.description = description;
this.url = url;
this.pid = pid;
this.ismenu = ismenu;
this.displayno = displayno;
}
@Override
public String toString() {
return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
}
PermissionDao类
package com.yinbangchi.dao;
import java.util.List;
import com.yinbangchi.entity.Permission;
import com.yinbangchi.uilt.BaseDao;
import com.yinbangchi.uilt.PageBean;
public class PermissionDao extends BaseDao<Permission> {
调用方法
public List<Permission> list(Permission permission,PageBean pageBean) throws Exception{
String sql="select *from t_easyui_Permission ";
return super.executeQuery(Permission.class, sql, pageBean);
}
测试：
public static void main(String[] args) throws Exception {
PermissionDao di=new PermissionDao();
List<Permission> list = di.list(null, null);
for (Permission s : list) {
System.out.println("星系"+s);
}
}
}
}
运行效果：
我们要做到的差不多的效果
代码2
public class BuildTree {
/**
* 默认0为顶级节点
* @param nodes
* @param <T>
* @return
*/
public static <T> TreeVo<T> build(List<TreeVo<T>> nodes) {
if (nodes == null) {
return null;
}
存放顶级节点（二级节点）的容器
List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
for (TreeVo<T> children : nodes) {
String pid = children.getParentId();
if (pid == null || "0".equals(pid)) {
topNodes.add(children);
如果是顶级节点，那么结束当前循环，继续下一次循环。
continue;
}
for (TreeVo<T> parent : nodes) {
String id = parent.getId();
判断二级节点父pid是否等于一级阶段的id
if (id != null && id.equals(pid)) {
parent.getChildren().add(children);
children.setHasParent(true);
parent.setChildren(true);
continue;
}
}
}
考虑到一个问题，数据库中没有顶级节点（一级节点）
TreeVo<T> root = new TreeVo<T>();
if (topNodes.size() == 1) {
数据库有顶级节点这条数据
root = topNodes.get(0);
} else {
数据库中没顶级结点这条数据，那么通过代码创建
root.setId("000");
root.setParentId("-1");
root.setHasParent(false);
root.setChildren(true);
root.setChecked(true);
root.setChildren(topNodes);
root.setText("顶级节点");
Map<String, Object> state = new HashMap<>(16);
state.put("opened", true);
root.setState(state);
}
return root;
}
/**
* 指定idparam为顶级节点
* @param nodes
* @param idParam
* @param <T>
* @return
*/
public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {
if (nodes == null) {
return null;
}
List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();
for (TreeVo<T> children : nodes) {
String pid = children.getParentId();
if (pid == null || idParam.equals(pid)) {
topNodes.add(children);
continue;
}
for (TreeVo<T> parent : nodes) {
String id = parent.getId();
if (id != null && id.equals(pid)) {
parent.getChildren().add(children);
children.setHasParent(true);
parent.setChildren(true);
continue;
}
}
}
return topNodes;
}
}
测试一下
public static void main(String[] args) throws Exception {
PermissionDao di=new PermissionDao();
List<Permission> list = di.list(null, null);
通过工具类完成指定的格式的输出
List<TreeVo<Permission>> nodes=new ArrayList<TreeVo<Permission>>();
Permission的格式是不满足easyui的tree主键，战线的数据格式
目的:将List转换成list<TreeVo>
实现:将List得到的单个Permisssion转换TreeVo，
TreeVo treeVo=null;
for (Permission s : list) {
treeVo=new TreeVo<>();
treeVo.setId(s.getId()+"");
treeVo.setText(s.getName()+"");
treeVo.setParentId(s.getPid()+"");
Map<String, Object> attributes=new HashMap<String, Object>();
attributes.put("self", s);
treeVo.setAttributes(attributes);
nodes.add(treeVo);
}
TreeVo<Permission> parent=BuildTree.build(nodes);
ObjectMapper on=new ObjectMapper();
String jsonstr = on.writeValueAsString(parent);
System.out.println(jsonstr);
}
运行结果
编译：
{
"id": "000",
"text": "椤剁骇鑺傜偣",
"state": {
"opened": true
},
"checked": true,
"attributes": null,
"children": [{
"id": "1",
"text": "书籍管理",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 1,
"name": "书籍管理",
"description": "书籍管理",
"url": null,
"pid": 0,
"ismenu": 1,
"displayno": 0
}
},
"children": [{
"id": "2",
"text": "新增（crud）",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 2,
"name": "新增（crud）",
"description": "书籍新增",
"url": "/bg/addBook.jsp",
"pid": 1,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}, {
"id": "3",
"text": "未上架",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 3,
"name": "未上架",
"description": "未上架书籍",
"url": "/bg/listBook1.jsp",
"pid": 1,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}, {
"id": "4",
"text": "已上架",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 4,
"name": "已上架",
"description": "已上架书籍",
"url": "/bg/listBook2.jsp",
"pid": 1,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}, {
"id": "5",
"text": "已下架",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 5,
"name": "已下架",
"description": "已下架书籍",
"url": "/bg/listBook3.jsp",
"pid": 1,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "1",
"hasParent": true,
"hasChildren": false
}],
"parentId": "0",
"hasParent": false,
"hasChildren": true
}, {
"id": "6",
"text": "订单管理",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 6,
"name": "订单管理",
"description": "商家的订单管理模块",
"url": null,
"pid": 0,
"ismenu": 1,
"displayno": 0
}
},
"children": [{
"id": "7",
"text": "未发货",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 7,
"name": "未发货",
"description": "未发货订单",
"url": "/bg/listOrder1.jsp",
"pid": 6,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "6",
"hasParent": true,
"hasChildren": false
}, {
"id": "8",
"text": "已发货",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 8,
"name": "已发货",
"description": "已发货订单",
"url": "/bg/listOrder2.jsp",
"pid": 6,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "6",
"hasParent": true,
"hasChildren": false
}, {
"id": "9",
"text": "已签收",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 9,
"name": "已签收",
"description": "已签收订单",
"url": "/bg/listOrder3.jsp",
"pid": 6,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "6",
"hasParent": true,
"hasChildren": false
}, {
"id": "14",
"text": "订单项",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 14,
"name": "订单项",
"description": "订单明细",
"url": "/bg/listOrderItem.jsp",
"pid": 6,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "6",
"hasParent": true,
"hasChildren": false
}],
"parentId": "0",
"hasParent": false,
"hasChildren": true
}, {
"id": "10",
"text": "订单管理",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 10,
"name": "订单管理",
"description": "会员的订单管理模块",
"url": "",
"pid": 0,
"ismenu": 1,
"displayno": 0
}
},
"children": [{
"id": "11",
"text": "未发货",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 11,
"name": "未发货",
"description": "未发货订单",
"url": "/bg/listMyOrder1.jsp",
"pid": 10,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "10",
"hasParent": true,
"hasChildren": false
}, {
"id": "12",
"text": "已发货",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 12,
"name": "已发货",
"description": "已发货订单",
"url": "/bg/listMyOrder2.jsp",
"pid": 10,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "10",
"hasParent": true,
"hasChildren": false
}, {
"id": "13",
"text": "已签收",
"state": null,
"checked": false,
"attributes": {
"self": {
"id": 13,
"name": "已签收",
"description": "已签收订单",
"url": "/bg/listMyOrder3.jsp",
"pid": 10,
"ismenu": 1,
"displayno": 0
}
},
"children": [],
"parentId": "10",
"hasParent": true,
"hasChildren": false
}],
"parentId": "0",
"hasParent": false,
"hasChildren": true
}],
"parentId": "-1",
"hasParent": false,
"hasChildren": true
}
总结：
最近头痛，加油，坚持。不要白费之前的努力。
2685
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
