简单了解EasyUI中的tree控件

前言：之前使用了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;
	}
}

效果：

最后的结果：

简单了解EasyUI中的tree控件

猜你喜欢