EasyUI实例--tree的使用3

来源：互联网发布：阿里云服务器免流教程编辑：程序博客网时间：2024/06/07 22:19

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

阅读全文

0 0