zTree-zTree Tree的 基础使用

配置

   
   
      <link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
      <script src="js/jquery-1.8.3.js"></script>
      <script src="js/ztree/jquery.ztree.all-3.5.js"></script>

关于手册：

主要在配置中，也就是set中设置要触发的事件及相关配置，在 callback在声明事件，这些事件的参数已经固定，只需自己实现相应的功能就好。

简单的树：

效果：

 

 

代码：

    
    
 <script type="text/javascript">
         var zNodes =[                      //根据单表的域名关系   open:true 展开   isParent:true作为父节点
            {id:0,addrname:'中国',pid:-1,open:true},
            {id:1,addrname:'陕西省',pid:0},
            {id:2,addrname:'甘肃省',pid:0},
            {id:3,addrname:'西安市',pid:1},
            {id:4,addrname:'兰州市',pid:2,isParent:true},
            {id:5,addrname:'高新区',pid:3},
            {id:6,addrname:'雁塔区',pid:3}
         ];
         
         var setting = {
            data: {
                simpleData: {          //更改zNodes关键字三个主要的依次为：idKey， name，pIdKey
					enable: true,
					idKey:"id",
					pIdKey:"pid"
				},
				key:{
				  name:"addrname"
				}
            }
        }
        
        $(document).ready(function(){
			$.fn.zTree.init($("#areaTree"), setting, zNodes);  //设置初始化
		});
      </script>
      <ul id="areaTree" class="ztree"></ul> 必须放在ul标签中

服务器端获取数据并加载

通过request域获取数据

前提是有一个按钮之类发生事件访问到servlet中，在返回到jsp页面展现tree

     
     
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
  <link rel="stylesheet" href="js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
  <script src="js/ztree/jquery.ztree.all-3.5.js"></script>
  <div>
        <ul id="areaTree" class="ztree"></ul>   //tree必须放在ul中
  </div>

  
<script type="text/javascript">
     var setting = {
            check:{
               enable: true,
               chkStyle: "checkbox"
            },
            data: {
                simpleData: {
					enable: true,
					idKey:"id",   //idKey、pIdKey、 name 必须设置为模型中的字段
					pIdKey:"pid"
				},
				key:{
				  name:"rname"  
				}
            }
        }
   
    var zNodes =${requestScope.addrList}  //从requestScop中获取数据，在servlet中将数据放在request域中
      zNodes.unshift( {id:0,addrname:'中国',pid:-1,open:true});  //为tree添加一个根节点 unshift()表示添加数组在数组的第一个位置
     $(document).ready(function(){
			$.fn.zTree.init($("#areaTree"), setting, zNodes);  //tree的初始化
	 });
    
</script>

servlet代码：

     
     
public void addrssList(HttpServletRequest req, HttpServletResponse resp)
				throws ServletException, IOException {
			 List addrList = this.addrDao.selectAddressList();   //从数据库中查到信息
			 String addrJsonStr = JsonUtil.transToJsonStr(addrList);  //将数据转化成json格式的字符串
			 System.out.println("addrJsonStr=="+addrJsonStr);
			 req.setAttribute("addrList",addrJsonStr);    //将字符串放入Request 
			 req.getRequestDispatcher("manage/address/addrList.jsp").forward(req, resp);  //跳转到jsp页面
		}

通过异步的方式一次加载

1、创建子节点的模型类

   
   
public class region {
private int id; //子节点
private String rname;  //子节点名称
private int pid;          //父节点
private boolean isparent; //是否为父节点
private boolean isopen;   //默认是否展开
//无参狗造
//成员变量的set方法和get方法
}

2、在servlet中获取到数据库的数据写入流中。

在servlet进行数据操作，查到所有节点数据

   
   
protected void getList(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		

		RegionDao rd = new RegionDaoimpl();
		List<region>  relist =rd.getallRegion(); //获取到所有节点的信息
		String jsonStr = JsonUtil.transToJsonStr(relist);  //装换成json格式并写入流中  jsonStr为json格式的字符串
	        JsonUtil.outJsonStrAndColse(resp, jsonStr);
	}

3、jsp页面获取到节点数据并初始化tree

   
   
var setting = {
 data: {
		simpleData: {
			enable: true,  //使用简单数据模式
			idKey: "id",     //id pid 以及key中的name表示节点名称的要与模型中定义的相符合
			pIdKey: "pid",
			rootPId: 0,
		},
		key: {
			name: "rname"
		}
	},
async: {           //加载
		enable: true,  //开启异步加载
		url:"ZtreeServlet.do"  //服务器路径
	},
callback : {  
        onAsyncSuccess : onAsyncSuccess,  //异步访问成功后获取到数据执行该方法
}
}
	var zTree;
         function onAsyncSuccess (event, treeId, treeNode, msg){
         zTree = $.fn.zTree.getZTreeObj(treeId);   //获取节点数据
            var nodes = zTree.getNodes();
  
        
         }
     
		$(document).ready(function(){
	$.fn.zTree.init($("#areaTree"), setting, zTree); //初始化tree ，areaTree为放置该tree的容器id
		});

容器：

   
   
 <ul id="areaTree" class="ztree"></ul> //tree必须放在ul中

通过异步的方式批量加载

原理：每个节点都有 id name pid 

 每个节点的pid都是搞节点的父节点的id

这样点击节点，获取节点的id，再将这个id的值作为pid的条件查询，如果有数据，证明是父节点，如果没有数据返回，证明是子节点

根据是不是父节点来给isParent设置true还是false

数据库表

 

1、创建子节点的模型类

    
    
package com.cpf.pojo;

public class region {
private int id;
private String rname;
private int pid;   
private String  isParent; //是否为父节点


private boolean isopen; //是否展开
private int subCount; //该节点拥有子节点的数量

public region() {
	super();
}
public region(int id, String rname, int pid) {
	super();
	this.id = id;
	this.rname = rname;
	this.pid = pid;
}
public int getId() {
	return id;
}
public void setId(int id) {
	this.id = id;
}
public String getRname() {
	return rname;
}
public void setRname(String rname) {
	this.rname = rname;
}
public int getPid() {
	return pid;
}
public void setPid(int pid) {
	this.pid = pid;
}
public String getIsParent() {
	return isParent;
}
public void setIsParent(String isParent) {
	this.isParent = isParent;
}
public int getSubCount() {
	return subCount;
}
public void setSubCount(int subCount) {
	this.subCount = subCount;    //获取到该节点拥有的子节点的数量，如果为0 ，则为叶子节点
	if(this.subCount == 0){
		this.setIsParent("false");
	}else{
		this.setIsParent("true");
	}
}
}

2、在servlet中获取到数据库的数据写入流中。

在servlet进行数据操作，查到所有节点数据

    
    
protected void getList2(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		int id = RequestUtil.getIntParam(req, "id", 0); //页面获取传给后台的父节点id
		RegionDao rd = new RegionDaoimpl();
		List<region>  relist =rd.getRegion(id); //获取到所有节点的信息
		String jsonStr = JsonUtil.transToJsonStr(relist);  //装换成json格式并写入流中
	    JsonUtil.outJsonStrAndColse(resp, jsonStr);
	}

dao层调用代码：（这里用到了dbutils的封装，）

sql查询涉及到相关子查询

查出id的所有信息的及这个id的子节点（也就是所有pid为跟这个id的相等的节点信息）

    
    
public List<region> getRegion(int id) {
			String sql2 = "SELECT addr1.*,(SELECT COUNT(*) FROM region AS addr2  WHERE addr2.pid = addr1.id) AS subCount FROM region AS addr1 WHERE pid =?";
	List<region>  relist=selectListObj(sql2, region.class, id);
		return relist;
	}

     
     
@Override
	 public <T> List<T> selectListObj(String sql, Class clazz, Object... params) {
		 Connection conn = null;
		 List<T> listObj  = null;
		 try {
			 conn = JdbcUtilFactory.getInstance().getJdbcUtil().getcConnection();
			 QueryRunner  qrun = new QueryRunner();
			 listObj=qrun.query(conn, sql,new BeanListHandler<T>(clazz) , params);
			
		} catch (SQLException e) {
			e.printStackTrace();
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		
		
		return listObj ;
	}

  3、jsp页面获取到节点数据并初始化tree

    
    
<script type="text/javascript">
     var setting = {
            async: {             //异步提交（点击自动提交）
				enable: true,             提交路径
				url:getUrlx,        //
				autoParam: ["id"]  // 自动参数，点击时会自动ajax的方式向后台提价该对象的id，
			},
			
            check:{
               enable: true,
               chkStyle: "checkbox"
            },
            data: {
                simpleData: {
					enable: true,
					idKey:"id",
					pIdKey:"pid"
				},
				key:{
				  name:"rname"
				}
            },
            callback: {
				onClick: onClickOper
			}
        }
    function onClickOper(event,treeId,treeNode){   
	    alert(treeNode.id); //点击对象的id
	   
	 ;
	 }
	 
	 function getUrlx(){
	   return "ZtreeServlet.do?code=async";
	 }
   
    var zNodes =[ {id:0,rname:'中国',pid:-1,isParent:true}]  //默认添加父节点
     $(document).ready(function(){
			$.fn.zTree.init($("#areaTree"), setting, zNodes);
	 });
    
</script>

容器：

1. <ul id="areaTree" class="ztree"></ul> //tree必须放在ul中

其他的基础功能介绍

 

代码：

   
   
  <script type="text/javascript">
   var setting = {
   data: {
		simpleData: {        //简单数据的设置
			enable: true,
			idKey: "id",
			pIdKey: "pid",
			rootPId: 0,
		},
		key: {
			name: "rname"
		}
	},
	async: {                       //异步加载的设置
				enable: true,
				url:"ZtreeServlet.do"
				},
	check: {                       //选中的设置
	    autoCheckTrigger: true,
	    chkboxType: { "Y": "p", "N": "s" },
		enable: true,
		chkStyle: "checkbox",    //也可以设置radio（单选）
		
		
	},
	edit: {                      //编辑的设置
		enable: true,
		drag: {
			autoExpandTrigger: true
		},
		enable: true
	},			
	callback : {              //各种事件的发生
        onAsyncSuccess : onAsyncSuccess,   //后台获取数据成功时发生
        onCheck: zTreeOnCheck ,              // 选中时触发
        onClick: zTreeOnClick,               //点击时触发
        beforeRename: zTreeBeforeRename,      //更新前触发
        onRename: zTreeOnRename,             //更新时触发
         onRemove: zTreeOnRemove          //删除时触发
        
                      }  
		};
		//以下是各种方法的实现
        //参数
		 //event js event对象
         //treeId   对应tree的容器的id
		 //treeNode  该节点的全部信息 
         //msg  获取到该tree的全部节点信息（数组形式的字符串）
		var zTree;
         function onAsyncSuccess (event, treeId, treeNode, msg){
         zTree = $.fn.zTree.getZTreeObj(treeId);   //获取节点数据
            var nodes = zTree.getNodes();
         }
          
         
        
	    function zTreeOnCheck(event, treeId, treeNode) {
      alert(treeNode.id + ", " + treeNode.rname + "," + treeNode.checked);
         };

         function zTreeOnClick(event, treeId, treeNode) {
        alert(treeNode.id + ", " + treeNode.rname+ ", " + treeNode.pid);
        
        };
                  //newName 更改的新名字  
                 //isCancel  isCancel = true 表示取消编辑操作（按下 ESC 或 使用 cancelEditName 方法）
                 //          isCancel = false 表示确认修改操作        
          function zTreeBeforeRename(treeId, treeNode, newName, isCancel) {
	          return newName.length > 3;
           }
           function zTreeOnRename(event, treeId, treeNode, isCancel) {
	       alert("zTreeOnRename="+treeNode.id + ", " + treeNode.rname+", " + treeNode.pid);
           }
           function zTreeOnRemove(event, treeId, treeNode) {
	            alert(treeNode.id + ", " + treeNode.rname);
             }
           
           
		$(document).ready(function(){
			$.fn.zTree.init($("#areaTree"), setting, zTree);
		});
      </script>
    <ul id="areaTree" class="ztree"></ul>