前言:之前使用了ztree这次感受以下easyui的tree控件!
第一步:引入相关jar和css,
<!-- 引入easyui -->
<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>
第二步:写一个jsp页面
<ul id="tt" class="easyui-tree">
<li>
<span>Folder</span>
<ul>
<li>
<span>Sub Folder 1</span>
<ul>
<li>
<span><a href="#">File 11</a></span>
</li>
<li>
<span>File 12</span>
</li>
<li>
<span>File 13</span>
</li>
</ul>
</li>
<li>
<span>File 2</span>
</li>
<li>
<span>File 3</span>
</li>
</ul>
</li>
<li>
<span>File21</span>
</li>
</ul>
第三步:查看其效果
接下来说一下:异步加载数据
(异步加载有可以有两种:
第一种:可以一次性把要显示的数据,关联好父子关系后,直接从服务器传送过来!(不推荐)
第二种:根据点击父节点传送子节点数据
)
我这里就说第二种了!
第一步:用户先创建一个空的树,然后指定一个服务器端,执行检索后动态返回JSON数据来填充树并完成异步请求。
创建一个空的树:
<!--
使用easyui的class
url:请求的获得服务端jsoN的数据的路径
-->
<ul class="easyui-tree" data-options="url:'/EasyUI/test'"></ul>
从服务端返回数据的json的格式要求,第二种可以没有children(第一种就必须要有该属性),但是其它三个必须要有,
[{
"id": 1,
"text": "Node 1",
"state": "closed",
"children": [{
"id": 11,
"text": "Node 11"
},{
"id": 12,
"text": "Node 12"
}]
},{
"id": 2,
"text": "Node 2",
"state": "closed"
}]
注意点
注意:
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为 'id', 通过URL发送到服务器上面检索子节点!
即使你传入数据中没有children类型的数据,但是easyUI的tree会在你点击closed的节点时,向服务端传入当前的节点id,服务端在返回其子节点数据即可!
简单示例代如下:
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<!-- 引入easyui -->
<link rel="stylesheet" type="text/css" href="/EasyUI/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/EasyUI/easyui/themes/icon.css">
<script type="text/javascript" src="/EasyUI/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/EasyUI/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<ul class="easyui-tree" data-options="url:'/EasyUI/test'"></ul>
</body>
</html>
pojo(实体类)
package cn.gxm.controller;
import java.io.Serializable;
public class User implements Serializable{
private int id;
private int ParentId;
private String name;
private boolean isParent;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getParentId() {
return ParentId;
}
public void setParentId(int parentId) {
ParentId = parentId;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isParent() {
return isParent;
}
public void setParent(boolean isParent) {
this.isParent = isParent;
}
public User(int id, int parentId, String name, boolean isParent) {
super();
this.id = id;
ParentId = parentId;
this.name = name;
this.isParent = isParent;
}
public User() {
}
}
EasyUI页面tree需要的格式数据类型:
package cn.gxm.controller;
import java.io.Serializable;
public class EasyUITreeNode implements Serializable{
private int id;
private String state;
private String text;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getState() {
return state;
}
public void setState(String state) {
this.state = state;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
模拟数据库查询到的数据:即最后返回给easyui中tree需要的数据类型!
package cn.gxm.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
@Controller
public class TestEasyUI {
@RequestMapping("/test")
@ResponseBody
public List<EasyUITreeNode> TestEasyUI(@RequestParam(value = "id", defaultValue = "0") Long parentId) {
List<EasyUITreeNode> nodeList = new ArrayList<EasyUITreeNode>();
// 模拟数据库数据
User user1 = new User(1, 0, "file1", true);
User user1_1 = new User(2, 1, "file1_1", true);
User user1_1_1 = new User(3, 2, "file1_1_1", false);
User user2 = new User(4, 0, "file2", true);
User user2_1 = new User(5, 4, "file2_1",false);
List<User> userList = new ArrayList<User>();
userList.add(user1);
userList.add(user1_1);
userList.add(user1_1_1);
userList.add(user2);
userList.add(user2_1);
//将模拟的数据封装成EasyUI页面需要的结构
if(parentId == 0) {
EasyUITreeNode node = new EasyUITreeNode();
node.setId(user1.getId());
node.setState(user1.isParent()?"closed":"open");
node.setText("file1");
EasyUITreeNode node2 = new EasyUITreeNode();
node2.setId(user2.getId());
node2.setState(user2.isParent()?"closed":"open");
node2.setText("file2");
nodeList.add(node);
nodeList.add(node2);
}else if(parentId == 1) {
EasyUITreeNode node = new EasyUITreeNode();
node.setId(user1_1.getId());
node.setState(user1_1.isParent()?"closed":"open");
node.setText("file1_1");
nodeList.add(node);
}else if(parentId == 2) {
EasyUITreeNode node = new EasyUITreeNode();
node.setId(user1_1_1.getId());
node.setState(user1_1_1.isParent()?"closed":"open");
node.setText("file1_1_1");
nodeList.add(node);
}else if(parentId == 4) {
EasyUITreeNode node = new EasyUITreeNode();
node.setId(user2_1.getId());
node.setState(user2_1.isParent()?"closed":"open");
node.setText("file2_1");
nodeList.add(node);
}
return nodeList;
}
}
效果:
最后的结果: