EasyUI实例--tree的使用3

最新推荐文章于 2020-06-22 08:03:39 发布

逆风飞翔的猿

最新推荐文章于 2020-06-22 08:03:39 发布

阅读量1.4k

点赞数

分类专栏： easyui 文章标签： easyUI tree 异步树

本文链接：https://blog.csdn.net/chenqk_123/article/details/78792220

版权

easyui 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

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

逆风飞翔的猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
EasyUI实例--tree的使用3

在之前的文章中说到关于tree的使用方式，介绍了基本树的生成规则以及前后台通信达到tree的可变性。介绍的是一种最基本的树，而且是基于根节点的树。最近有人看到博客问我有关于tree的问题，我不想基于根节点的tree，我只有二级节点或者我只有三级节点。然后翻了翻easyUI的API发现了一种树可以实现这种需求-----Async Tree1.JSON格式既然异步树支持，那么猜想一下他说
复制链接

扫一扫