在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带过去查他的子节点。

看看官方的异步树的案例：
        
        
         
            看完上面这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>
10
 
1
        <script type="text/javascript">
2
            $(function(){
3
                // 从远程加载树的数据
4
                $('#tt').tree({    
5
                    url:'${basePath}nsfw/tree_findByPId.action',
6
                    lines:true
7
                });  
8








9




            });//end of window onload








10




        </script>






























    jsp代码：




    <body>

		<!-- 树容器 -->

		<ul id="tt"></ul>

	</body>






 




















4












 














1




    <body> 








2




        <!-- 树容器 -->








3




        <ul id="tt"></ul> 








4




    </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








 














1




package com.tax.pojo.nsfw;








2












3




import java.io.Serializable;








4




import javax.persistence.Column;








5




import javax.persistence.Entity;








6




import javax.persistence.GeneratedValue;








7




import javax.persistence.GenerationType;








8




import javax.persistence.Id;








9




import javax.persistence.Table;








10












11




/**








12




 * OrgTree(用于测试EasyUI的Tree)








13




 * @author   ZENG.XIAO.YAN








14




 * @date     2017年8月24日 上午9:24:54








15




 * @version  v1.0








16




 */








17




@Entity








18




@Table(name="org_tree")








19




public class OrgTree implements Serializable {








20




    /** serialVersionUID */








21




    private static final long serialVersionUID = 6661807356404913246L;








22




    @Id








23




    @GeneratedValue(strategy=GenerationType.IDENTITY)








24




    @Column








25




    private Integer id;








26




    @Column








27




    private String title;








28




    @Column(name="p_id")








29




    private Integer pId;








30




    @Column(name="is_parent")








31




    private boolean isParent;








32












33




    public Integer getId() {








34




        return id;








35




    }








36












37




    public void setId(Integer id) {








38




        this.id = id;








39




    }








40












41




    public String getTitle() {








42




        return title;








43




    }








44












45




    public void setTitle(String title) {








46




        this.title = title;








47




    }








48












49




    public boolean getIsParent() {








50




        return isParent;








51




    }








52












53




    public void setIsParent(boolean isParent) {








54




        this.isParent = isParent;








55




    }








56












57




    public Integer getpId() {








58




        return pId;








59




    }








60












61




    public void setpId(Integer pId) {








62




        this.pId = pId;








63




    }








64




    








65




    // 这个2个get方法主要用于tree的数据，tree数据需要 {"id":1,"text":"root","state":"closed"}








66




    public String getText() {








67




        return getTitle();








68




    }








69




    public String getState() {








70




        return getIsParent() ? "closed" : "open";








71




    }








72




    








73




}



































（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;

	}


























11












 














1




    /** 通过树父节点id查找子节点 */








2




    public String findByPId() {








3




        if(id == null){








4




            id = 0;








5




        }








6




        // 通过传来的父id查询出数据








7




        List<OrgTree> list = orgTreeService.findListByPId(id);








8




        // 封装数据








9




        responseData = list; //这里用了struts2的json插件，且配置了root为responseData








10




        return SUCCESS;








11




    }






























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


        





        下面为题外话


        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;

	}


























25












 














1




    /** 通过树父节点id查找子节点 */








2




    public String findByPId() {








3




        if(id == null){








4




            id = 0;








5




        }








6




        // 通过传来的父id查询出数据








7




        List<OrgTree> list = orgTreeService.findListByPId(id);








8




        // 封装数据








9




        /** 上面的父id为0的话，只会显示根节点，因此我们处理下，显示根节点和一级子节点 */








10




        if(id == 0){








11




            OrgTree rootTree = list.get(0);    








12




            // 我们下面就把根节点的子节点查出来，封装到children属性








13




            List<OrgTree> childList = orgTreeService.findListByPId(rootTree.getId());








14




            responseData = new ArrayList();








15




            HashMap<String,Object> map = new HashMap<>();








16




            map.put("id", rootTree.getId());








17




            map.put("text", rootTree.getText());








18




            map.put("state", "open");








19




            map.put("children", childList);








20




            responseData.add(map);








21




        }else{








22




            responseData = list;








23




        }








24




        return SUCCESS;








25




    }






























        效果：


            

 






四、开发实战-前台刷新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);

				}

			}






























 














1




            // 用于刷新节点，是window的方法，可跨freamset调用








2




            function targetTreeReload(node){








3




                // 如果node.target为undefined说明传的是id








4




                if(node.target == undefined){








5




                    // 需要通过id找到节点（node此时是id）,然后重新赋值给node








6




                    node = $('#tt').tree('find', node);








7




                }








8




                var parentNode = $("#tt").tree("getParent",node.target); 








9




                alert(parentNode);








10




                // node.target表示该节点的DOM对象








11




                if(parentNode == null){








12




                    // 为null代表当前节点已经是根节点了








13




                    $("#tt").tree("reload",node.target);








14




                }else{








15




                    $("#tt").tree("reload",parentNode.target);








16




                }








17




            }







































 







 





 


        

 




 


 





 
































												


											
EasyUI-Tree的使用的更多相关文章
	

    
						
  1. Easyui Tree方法扩展 - getLevel(获取节点级别)
		
    Easyui Tree一直就没有提供这个方法,以前没有用到,所以一直没怎么在意,这次自己用到了,顺便扩展了一个方法,分享给大家. $.extend($.fn.tree.methods, { getLe ...
    
		
    2. 
						
  2. [转]easyui tree 模仿ztree 使用扁平化加载json
		
    原文地址:http://my.oschina.net/acitiviti/blog/349377 参考文章:http://www.jeasyuicn.com/demo/treeloadfilter.h ...
    
		
    3. 
						
  3. 【项目经验】EasyUI Tree
		
    ITOO5.0开始了,我参加了伟大的基础系统,从整体上来说,基础系统有三个职能: 1.自己的核心职能--选课(公共选修课,专业选修课),课表: 2.为其他系统提供真实数据: 3.维护信息 而近两三天, ...
    
		
    4. 
						
  4. Jquery EasyUI Tree .net实例
		
    图片: 针对tree: 数据库: CREATE TABLE [dbo].[SystemModel]( [Id] [,) NOT NULL, [Name] [nvarchar]() NULL, [Fat ...
    
		
    5. 
						
  5. Jquery easyui Tree的简单使用
		
    Jquery easyui Tree的简单使用 Jquery easyui 是jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery EasyUI的目标就是帮助web开发者更轻 ...
    
		
    6. 
						
  6. Jquery easyui tree的使用
		
    这个ui用的一切都是json数据.树也是如此! 后台需要返回与格式匹配的json数据才能正确加载树. 页面定义一个ui: <ul id="messageInfoAddTree" ...
    
		
    7. 
						
  7. EasyUI Tree判断节点是否是叶
		
    方法1:  $('#domaincatalog').tree('isLeaf', node.target); 返回true或false ,true表示是叶节点, false即不是 方法2:官方文档中: ...
    
		
    8. 
						
  8. 原创: EasyUI  Tree 最后一级 节点 横向排列
		
    原创: EasyUI  Tree 最后一级 节点 横向排列 转载请指明出处 必须要写在: onLoadSuccess 事件中 ddAuthTree.tree({ lines: true, checkb ...
    
		
    9. 
						
  9. EasyUI –tree、combotree学习总结
		
    EasyUI –tree.combotree学习总结 一.   tree总结 (一).tree基本使用 tree控件是web页面中将数据分层一树形结构显示的. 使用$.fn.tree.defaults ...
    
		
    10. 
						
  10. Easyui tree 开启拖放后 在IE下 性能惨不忍睹
		
    项目中加载一个树结构代码如下 //加载树 function LoadTree() { var url = "../Ajax/StationTree.ashx?showVirtual=1&qu ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. .NET、ADO.NET、ASP.NET名称解析及.NET平台架构组成
			
    转https://blog.csdn.net/xiaouncle/article/details/53265256 名词解释 1.Winform:Windows应用程序.桌面应用程序.C/S应用程序  ...
    
			
    2. 
						
  2. Python pip 安装与使用
			
    pip 是 Python 包管理工具,该工具提供了对Python 包的查找.下载.安装.卸载的功能. 目前如果你在 python.org 下载最新版本的安装包,则是已经自带了该工具. Python 2 ...
    
			
    3. 
						
  3. 转：Sql Server中的表访问方式Table Scan, Index Scan, Index Seek
			
    0.参考文献 Table Scan, Index Scan, Index Seek SQL SERVER – Index Seek vs. Index Scan – Diffefence and Us ...
    
			
    4. 
						
  4. 阿里云朱照远: AI打开新视界 8K时代已来!
			
    2018年4月11-12日,2018亚太CDN峰会在北京隆重召开,大会由亚太CDN领袖论坛.电视云论坛.短视频论坛.视频云论坛.新技术论坛.运营商论坛.国际云论坛等7大部分组成.在亚太CDN领袖峰会上 ...
    
			
    5. 
						
  5. [LOJ 6031]「雅礼集训 2017 Day1」字符串
			
    [LOJ 6031] 「雅礼集训 2017 Day1」字符串 题意 给定一个长度为 \(n\) 的字符串 \(s\), \(m\) 对 \((l_i,r_i)\), 回答 \(q\) 个询问. 每个询 ...
    
			
    6. 
						
  6. 菜鸟对APP界面设计的一些心得小结
			
    1. 前言 当我看着我以前做的一些app界面,我意识到我应该把我的界面设计能力水平再提升一个,因为实在是丑啊!贴一些以前的设计: 现在看来,是不能看的了.我主要是做需求设计,后面也有一些美工的工作,我 ...
    
			
    7. 
						
  7. PAT乙级真题及训练题  1025. 反转链表 (25)
			
    PAT乙级真题及训练题 1025. 反转链表 (25) 感觉几个世纪没打代码了,真是坏习惯,调了两小时把反转链表调出来了,心情舒畅. 这道题的步骤 数据输入,数组纪录下一结点及储存值 创建链表并储存上 ...
    
			
    8. 
						
  8. kdTree相关原理及c++实现
			
    kdTree概念 kd-tree或者k维树是计算机科学中使用的一种数据结构,用来组织表示k维空间中点的集合.它是一种带有其他约束条件的二分查找树.Kd-tree对于区间和近邻搜索十分有用.一般位于三维 ...
    
			
    9. 
						
  9. 使用PhotoShop将视频转为gif格式
			
    由于文档中不方便上传视频,尤其是一些短视频,将其制作成gif格式更便于浏览,刚好PhotoShop中有这种功能,笔者在这里分享一下. 在PS中打开需要转换格式的视频文件,选择文件选项导出中的导出为We ...
    
			
    10. 
						
  10. 13.5.SolrCloud集群使用手册之数据导入
			
    转载请出自出处:http://www.cnblogs.com/hd3013779515/ 1.使用curl命令方式 SolrCloud时会根据路由规则路由到各个shard. 删除所有数据 curl h ...
    
			
    11.