在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. maven一模块字段调用另一个模块数据生成下拉框
			
    店铺运营数据录入表实现的下拉框实现 从片区管理中提取分区数据,在招商管理(MIS)模块中获取并以下拉框的形式展现 ctrl类: 1.首先在ctrl类注入需提取另一模块字段的serviceclient接 ...
    
			
    2. 
						
  2. openCV 扩图
			
    1.扩图 import cv2 import numpy as np img=cv2.imread('Test2.jpg',1) width=img.shape[0] height=img.shape ...
    
			
    3. 
						
  3. JavaScript函数节流（throttle）与函数去抖（debounce）
			
    对于浏览器窗口大小改变的时候,来动态改变页面元素的大小,可以采用window的resize事件,实现代码: <script type="text/javascript"> ...
    
			
    4. 
						
  4. Linux下查看端口，强制kill进程
			
    1.查看8088端口被哪个进程占用:netstat -apn | grep 8088 2.强制kill某一进程:kill -s 9 1827
    
			
    5. 
						
  5. Interpreting /proc/meminfo and free output for Red Hat Enterprise Linux 5, 6 and 7
			
    Interpreting /proc/meminfo and free output for Red Hat Enterprise Linux 5, 6 and 7 Solution Verified ...
    
			
    6. 
						
  6. cdn刷新和对应的浏览器现象
			
    1.浏览器手动点刷新,会发起网络请求,从cdn判断last-modify时间是否一致,未过期则返回304,如果已经过期则返回200,重新请求 关键在于发起的网络请求中'If-Modified-Sinc ...
    
			
    7. 
						
  7. 【工具推荐】截图工具 Snipaste
			
    0. 说明 [官网介绍] Snipaste 是一个简单但强大的截图工具,也可以让你将截图贴回到屏幕上!下载并打开 Snipaste,按下 F1 来开始截图,再按 F3,截图就在桌面置顶显示了.就这么简 ...
    
			
    8. 
						
  8. django模板系统（下）
			
    主要内容:母版,继承母版,块,组件,静态文件 母版 <!DOCTYPE html> <html lang="en"> <head> <me ...
    
			
    9. 
						
  9. 嵌入式开发板LInux更新系统、安装软件、下载资源碰到的问题
			
    CAfile: /etc/ssl/certs/ca-certificates.crt CRLfile: none 先同步系统时间 shell 输入命令 date 如果显示的时间跟你本地时间不一样,先设 ...
    
			
    10. 
						
  10. October 20th 2017 Week 42nd Friday
			
    My life is in these books. Read these and know my heart. 我的人生就在这些书中,读完他们就能读懂我的心. Some people say tha ...
    
			
    11.