EasyUI-Tree的使用

最新推荐文章于 2022-05-06 13:01:24 发布

aiben2024

最新推荐文章于 2022-05-06 13:01:24 发布

阅读量163

点赞数

文章标签： php json javascript ViewUI

原文链接：http://www.cnblogs.com/zeng1994/p/7443175.html

版权

在web开发中，树是比较常见的东西。以前用过zTree，也用过EasyUI-Tree，过了好久后发现都忘记怎么用了。

这几天重新回顾了EasyUI-tree的使用，在此将相关知识点记录下来。

一、EasyUI-Tree的官方介绍

（1）基本使用的介绍

使用方式：

数据格式：

更多详细知识见官方文档：

http://www.jeasyui.net/plugins/185.html

http://www.jeasyui.com/documentation/tree.php

（2）异步树的使用

一般情况下，异步树使用得比较多。异步树就是指当你点击展开某个树的节点时，该节点才向后台发请求去加载子节点。

关键点：

异步树的数据结构中，每个节点必须包含 id、text 、state这3个属性。而且，如果该个节点有子节点(即他是父节点)，

那么他的state必须是closed的，这样在该节点默认就是闭合的；在展开他的时候才会向后台发请求，

把他的id带过去查他的子节点。

看看官方的异步树的案例：

地址： http://www.jeasyui.com/tutorial/tree/tree2.php

看完上面这3张官方介绍的截图，大概就懂了异步树是怎么玩的了。下面来分析下后台代码吧。

笔者不懂php，不过也可以来分析下

- - 首先，载入含有树组件的页面时，会向后台发请求，请求url就是tree的url；此时是没传id过来的
  - 如果没带id过来，那么把id默认设为0，然后去后台查询父id等于id的数据
  - 如果带了id就直接查询父id等于id的数据
  - 查询出数据来后，对数据进行封装；必须包含id，text，state属性。而且state属性是根据有没有子节点来赋值
  - 将数据封装好后，返回json数据。

二、开发实战-前台

先看下笔者开发好的效果，感觉差强人意。

js代码：

		<script type="text/javascript">
			$(function(){
				// 从远程加载树的数据
				$('#tt').tree({    
				    url:'${basePath}nsfw/tree_findByPId.action',
				    lines:true
				});  

			});//end of window onload
		</script>

              
          
        <script type="text/javascript">
            $(function(){
                // 从远程加载树的数据
                $('#tt').tree({    
                    url:'${basePath}nsfw/tree_findByPId.action',
                    lines:true
                });  
            });//end of window onload
        </script>

jsp代码：

    <body> 
		<!-- 树容器 -->
		<ul id="tt"></ul> 
	</body>

              
          
    <body> 
        <!-- 树容器 -->
        <ul id="tt"></ul> 
    </body>

三、开发实战-后台

后台代码相对简单，就只需要查询出带过来的id的子节点就可以。

（1）实体类代码

package com.tax.pojo.nsfw;

import java.io.Serializable;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

/**
 * OrgTree(用于测试EasyUI的Tree)
 * @author   ZENG.XIAO.YAN
 * @date 	 2017年8月24日 上午9:24:54
 * @version  v1.0
 */
@Entity
@Table(name="org_tree")
public class OrgTree implements Serializable {
	/** serialVersionUID */
	private static final long serialVersionUID = 6661807356404913246L;
	@Id
	@GeneratedValue(strategy=GenerationType.IDENTITY)
	@Column
	private Integer id;
	@Column
	private String title;
	@Column(name="p_id")
	private Integer pId;
	@Column(name="is_parent")
	private boolean isParent;

	public Integer getId() {
		return id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public boolean getIsParent() {
		return isParent;
	}

	public void setIsParent(boolean isParent) {
		this.isParent = isParent;
	}

	public Integer getpId() {
		return pId;
	}

	public void setpId(Integer pId) {
		this.pId = pId;
	}
	
	// 这个2个get方法主要用于tree的数据，tree数据需要 {"id":1,"text":"root","state":"closed"}
	public String getText() {
		return getTitle();
	}
	public String getState() {
		return getIsParent() ? "closed" : "open";
	}
	
}

 
          x 
         

              
          
package com.tax.pojo.nsfw;
import java.io.Serializable;
import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;
/**
 * OrgTree(用于测试EasyUI的Tree)
 * @author   ZENG.XIAO.YAN
 * @date     2017年8月24日 上午9:24:54
 * @version  v1.0
 */
@Entity
@Table(name="org_tree")
public class OrgTree implements Serializable {
    /** serialVersionUID */
    private static final long serialVersionUID = 6661807356404913246L;
    @Id
    @GeneratedValue(strategy=GenerationType.IDENTITY)
    @Column
    private Integer id;
    @Column
    private String title;
    @Column(name="p_id")
    private Integer pId;
    @Column(name="is_parent")
    private boolean isParent;
    public Integer getId() {
        return id;
    }
    public void setId(Integer id) {
        this.id = id;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public boolean getIsParent() {
        return isParent;
    }
    public void setIsParent(boolean isParent) {
        this.isParent = isParent;
    }
    public Integer getpId() {
        return pId;
    }
    public void setpId(Integer pId) {
        this.pId = pId;
    }
    
    // 这个2个get方法主要用于tree的数据，tree数据需要 {"id":1,"text":"root","state":"closed"}
    public String getText() {
        return getTitle();
    }
    public String getState() {
        return getIsParent() ? "closed" : "open";
    }
    
}

（2）Action代码

注意一点：根节点必须要自己手动在数据库插入数据，它的父id必须为0，且它是必须是父节点。

	/** 通过树父节点id查找子节点 */
	public String findByPId() {
		if(id == null){
			id = 0;
		}
		// 通过传来的父id查询出数据
		List<OrgTree> list = orgTreeService.findListByPId(id);
		// 封装数据
		responseData = list; //这里用了struts2的json插件，且配置了root为responseData
		return SUCCESS;
	}

              
          
    /** 通过树父节点id查找子节点 */
    public String findByPId() {
        if(id == null){
            id = 0;
        }
        // 通过传来的父id查询出数据
        List<OrgTree> list = orgTreeService.findListByPId(id);
        // 封装数据
        responseData = list; //这里用了struts2的json插件，且配置了root为responseData
        return SUCCESS;
    }

通过上面这段代码可以实现异步树。效果如下图

下面为题外话

ps：上面这样其实已经把功能实现了，但是，可能你的产品经理不喜欢加载页面进来就只能看到一个根节点。比如：他希望通过页面进来后，能看到根节点展开的效果；也就是把根节点的子节点显示出来。

解决这个问题不难，就是在加载根节点的时候，把子节点（不包含孙节点，只要子节点）内容也查出来，且把根节点的state设为open。

下面上代码：

	/** 通过树父节点id查找子节点 */
	public String findByPId() {
		if(id == null){
			id = 0;
		}
		// 通过传来的父id查询出数据
		List<OrgTree> list = orgTreeService.findListByPId(id);
		// 封装数据
		/** 上面的父id为0的话，只会显示根节点，因此我们处理下，显示根节点和一级子节点 */
		if(id == 0){
			OrgTree rootTree = list.get(0);    
            // 我们下面就把根节点的子节点查出来，封装到children属性
			List<OrgTree> childList = orgTreeService.findListByPId(rootTree.getId());
			responseData = new ArrayList();
			HashMap<String,Object> map = new HashMap<>();
			map.put("id", rootTree.getId());
			map.put("text", rootTree.getText());
			map.put("state", "open");
			map.put("children", childList);
			responseData.add(map);
		}else{
			responseData = list;
		}
		return SUCCESS;
	}

              
          
    /** 通过树父节点id查找子节点 */
    public String findByPId() {
        if(id == null){
            id = 0;
        }
        // 通过传来的父id查询出数据
        List<OrgTree> list = orgTreeService.findListByPId(id);
        // 封装数据
        /** 上面的父id为0的话，只会显示根节点，因此我们处理下，显示根节点和一级子节点 */
        if(id == 0){
            OrgTree rootTree = list.get(0);    
            // 我们下面就把根节点的子节点查出来，封装到children属性
            List<OrgTree> childList = orgTreeService.findListByPId(rootTree.getId());
            responseData = new ArrayList();
            HashMap<String,Object> map = new HashMap<>();
            map.put("id", rootTree.getId());
            map.put("text", rootTree.getText());
            map.put("state", "open");
            map.put("children", childList);
            responseData.add(map);
        }else{
            responseData = list;
        }
        return SUCCESS;
    }

效果：

四、开发实战-前台刷新tree的节点的处理

在新增、编辑、删除树的节点后都需要对树的节点刷新。比如在一个节点下面新增了节点，那么该节点肯定是要刷新的。

但是，笔者发现刷新的方法reload的第二个参数应该填是当前节点的父节点的dom对象。这点好奇怪，就像生了个孙子，要刷新爷爷的感觉。

经过笔者的验证，这样刷新是可行的。但当前节点是根节点时，就没父节点了，只能刷新自己了。

下面上一段js代码，就是刷新树的。传入参数可以是该节点对象，也可以是该节点的id

			// 用于刷新节点，是window的方法，可跨freamset调用
			function targetTreeReload(node){
				// 如果node.target为undefined说明传的是id
				if(node.target == undefined){
					// 需要通过id找到节点（node此时是id）,然后重新赋值给node
					node = $('#tt').tree('find', node);
				}
				var parentNode = $("#tt").tree("getParent",node.target); 
				alert(parentNode);
				// node.target表示该节点的DOM对象
				if(parentNode == null){
					// 为null代表当前节点已经是根节点了
					$("#tt").tree("reload",node.target);
				}else{
					$("#tt").tree("reload",parentNode.target);
				}
			}

              
          
            // 用于刷新节点，是window的方法，可跨freamset调用
            function targetTreeReload(node){
                // 如果node.target为undefined说明传的是id
                if(node.target == undefined){
                    // 需要通过id找到节点（node此时是id）,然后重新赋值给node
                    node = $('#tt').tree('find', node);
                }
                var parentNode = $("#tt").tree("getParent",node.target); 
                alert(parentNode);
                // node.target表示该节点的DOM对象
                if(parentNode == null){
                    // 为null代表当前节点已经是根节点了
                    $("#tt").tree("reload",node.target);
                }else{
                    $("#tt").tree("reload",parentNode.target);
                }
            }