在之前的文章中说到关于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);