在之前的文章中说到关于tree的使用方式,介绍了基本树的生成规则以及前后台通信达到tree的可变性。介绍的是一种最基本的树,而且是基于根节点的树。
最近有人看到博客问我有关于tree的问题,我不想基于根节点的tree,我只有二级节点或者我只有三级节点。然后翻了翻easyUI的API发现了一种树可以实现这种需求-----Async Tree
1.JSON格式
既然异步树支持,那么猜想一下他说支持的json格式,一定是[{},{},{}...................]这种josn格式。
[
{
"id": 1,
"text": "Node 1",
"state": "open",
"children":[
{"id":4,
"text":"Node 4",
"state":"open"
},
{"id":5,
"text":"Node 5",
"state":"open"
}
]
},
{
"id": 2,
"text": "Node 2",
"state": "open"
},
{
"id": 3,
"text": "Node 3",
"state": "open"
}
]
我们仔细看一下带有根节点生成的tree是什么样子的:
从上面我们可以看出它是以div作为根节点,然后后面生成一堆的li-----ul 标签。我们来观察一下ul---li标签的定义
从ul开始往下就符合没有根节点的tree的格式了,那我只需要将tree绑定到ul上其实也就可以了,尝试一下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tree Lines - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Tree Lines</h2>
<p>This sample shows how to show tree lines.</p>
<div style="margin:10px 0;"></div>
<div class="easyui-panel" style="padding:5px">
<ul class="easyui-tree" id="tt"></ul>
<script type="application/javascript">
$(function(){
$('#tt').tree({
url:"test.json",
loadFilter: function(data){
console.info(data);
return data;
}
});
})
</script>
</div>
</body>
</html>
来看一下效果图,确实如此:
2.后台操作
后台的操作简单一点,我这里使用的静态资源文件来实现的:
我们在后台定义类的时候最好正规一点,包含VO,BO两种类。
VO:与前端页面进行交互的实体类,VO是多变的,可以根据需求以及页面展示来随时调整的。
BO:入库类,和数据库字段对应
我们需要将从数据库取出来的BO转换为VO-------{"id":"","text":"',"state":"","children":[]} 类型。
转换之后的VO就可以存到list集合中,然后使用JDK提供的JSONObject或者JSONArray来转换为json格式。
response到前台即可。
Tree.java
package com.chenqk.springmvc.entity;
import java.util.List;
/**
* 测试类,用于实现easyUI tree组件的使用
* @author chenqk
*
*/
public class Tree {
private int id;
private int pid;
private String text;
private String attributes;
private List<Tree>children;
private boolean state ;
public boolean isState() {
return state;
}
public void setState(boolean state) {
this.state = state;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getAttributes() {
return attributes;
}
public void setAttributes(String attributes) {
this.attributes = attributes;
}
public List<Tree> getChildren() {
return children;
}
public void setChildren(List<Tree> children) {
this.children = children;
}
@Override
public String toString() {
return "Tree [id=" + id + ", pid=" + pid + ", text=" + text
+ ", attributes=" + attributes + "]";
}
}
TreeVo.java:
package com.chenqk.springmvc.entity;
import java.util.List;
public class TreeVo {
private int id;
private int pid;
private String text;
private String attributes;
private List<Tree>children;
private boolean state ;
public TreeVo(Tree tree){
this.id = tree.getId();
this.pid = tree.getPid();
this.text = tree.getText();
this.attributes = tree.getAttributes();
this.children = tree.getChildren();
this.state = tree.isState();
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public int getPid() {
return pid;
}
public void setPid(int pid) {
this.pid = pid;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
public String getAttributes() {
return attributes;
}
public void setAttributes(String attributes) {
this.attributes = attributes;
}
public List<Tree> getChildren() {
return children;
}
public void setChildren(List<Tree> children) {
this.children = children;
}
public boolean isState() {
return state;
}
public void setState(boolean state) {
this.state = state;
}
}
这样就不需要使用我之前说的那种拼接的方式了
JSONArray json_rray = JSONArray.fromObject(new ArrayList<TreeVo>());
response.getWriter().print(json_rray);