zoukankan      html  css  js  c++  java

  • EasyUI-Tree的使用

            在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>
        jsp代码：
        <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";
	}
	
}

    （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;
	}
            通过上面这段代码可以实现异步树。效果如下图
            

            下面为题外话
            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;
	}
            效果：
                
     

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



     


     

     
            
     

     
     

     
  • 相关阅读:
    201771030123-王爽 实验一 软件工程准备—阅读《现代软件工程—构建之法》并提问
    《面向对象程序设计课程学习进度条》
    201771010132-徐思 实验四 软件项目案例分析
    201771010132-徐思 实验三 结对项目-《西北师范大学疫情防控信息系统》
    201771010132-徐思 实验一 软件工程准备-浏览《构建之法》
    徐思201771010132 《面向对象程序设计（java）》课程学习总结
    徐思 201771010132
    徐思201771010132《面向对象程序设计（java）》第十六周学习总结
    徐思201771010132《面向对象程序设计（java）》第十五周学习总结
    徐思201771010132《面向对象程序设计（java）》第十四周学习总结
  • 原文地址：https://www.cnblogs.com/zeng1994/p/7443175.html
Copyright © 2011-2022 走看看