Jquery Ztree树型插件总结

阅读更多

最近在使用树型插件的时候知道了ZTree,总体了解了一下，功能非常强大，在此进行总结。

1.插件的下载和API地址
官方网站：http://www.ztree.me/v3/main.php#_zTreeInfo
演示地址：http://www.ztree.me/v3/demo.php
API：http://www.ztree.me/v3/api.php


需要引用的类和样式
jquery.ztree.all-3.4.min.js
zTreeStyle.css
jquery-1.4.4.min.js

2.使用习惯上的总结
  初始加载，一股我们使用树型插件的时候都习惯给树插件设置一个AJAX获取地址，然后让树插件自己去获取，但是在ZTree中有点不一样， ZTree中的AJAX地址不会在初始加载时生效，而是在有子项的节点才会触发。



例子1：
HTML部分

var setting = {
            isSimpleData: true,
            treeNodeKey: "id",         //设置节点唯一标识属性名称
            treeNodeParentKey: "pId",  //设置节点的父节点唯一标识属性名称
            nameCol: "name",           //设置 zTree 显示节点名称的属性名称,此处默认为Name
            showLine: true,            //在树型中是否显示线条样式
            root: {                    //zTree数据节点的根，全部节点数据都处于 root.nodes 内
                isRoot: true,
                nodes: []
            },
            async: {
	          enable: true,
	          url:"<%=path%>/common/dataInfo/getBmDataDB2.jsp?RETURNTYPE=DFKPI_FOR_ST&TYPE=<%=type%>", 
	          autoParam:["id","pId","name"]//这里设置在AJAX请求的时候，在请求地址后会自动追加的节点项
	        },
            callback:{//设置事件
                beforeAsync: zTreeOnAsyncSuccess
            },
			view: {//设置字体样式调用方法getFontCss是一个返回样式的方法，具体使用参照API
				fontCss: getFontCss
			}
        };
        
        
        $.ajax({//初始化的时候，需要自行获取第一次数据
	        async : true,
	        cache:false,
	        type: 'POST',
	        dataType : "json",
	        url: "<%=path%>/common/dataInfo/getBmDataDB2.jsp?RETURNTYPE=DFKPI_FOR_ST&TYPE=<%=type%>",//请求的action路径
	        error: function () {//请求失败处理函数
	            alert('请求失败');
	        },
	        success:function(data){ //请求成功后处理函数。
	            //alert(data);
	            
	           zTree =  $.fn.zTree.init($("#bxzb"), setting, data);
	        }
	    });

服务器端的组合JAVA

List> lst = queryQueryUtil.getQueryData(s);//获取需要的数据列
		
		
		List nodeArray = new ArrayList();
		
		nodeArray.add("{ \"id\":0, \"pId\":-1, \"name\":\"指标信息\",\"url\":\"\"}");
		
		int index=1;
		for (Map m : lst) {
			nodeArray.add("{ \"id\":"+m.get("id")+", \"pId\":0, \"name\":\""+m.get("text")+"\",\"url\":\"\"}");
		}
		
		ret = JSONArray.fromObject(nodeArray).toString();//使用转换工具把对象转换成JSON

3.其它简便树型插件推荐
  如果是简要的树应用（不涉及太多的节点选中等操作）推荐使用SimpleTree，这是一个比较老的控件，下载地址已经失效，下载地址见我上传的附件。

例子：
需要引用的类和样式
jquery.simple.tree.js
simpleTree.css
jquery-1.4.4.min.js


重点：SimpleTree主要是通过标签来决定是否有子项如果是用

标签包住然后里面的
• 有相应请求地址的，这种就代表是有子项的，不然就代码已经到子项了。
  
  HTML部分
  

  
  		
  人员树
  			
  
  				
  人员
  					
  
  						
  {url:wtjlAction!getRyListForAjax.action?userType=1}
  					
  				
  			
  		
  	
  

  
  
  
  
  服务器端：
  

  public void getRyListForAjax(){
  		HttpServletRequest request = ServletActionContext.getRequest();
  		HttpServletResponse response = ServletActionContext.getResponse(); 
  		
  		RequestParametersUtil rpu = new RequestParametersUtil(request);
  		
  		int userType = rpu.getInteger("userType",1);
  		
  		try {
  			ryList = zhManager.getRyList(userType);
  			
  			
  			StringBuffer str = new StringBuffer();
  
  			for (TXtRy ry : ryList) {
  				str.append("
  ");
  				str.append(ry.getUserName());
  				str.append("
  ");
  			}
  
  			// response 输出文本信息
  			response.setContentType("html/txt");
  			response.setCharacterEncoding("utf-8");
  			response.setHeader("Pragma", "no-cache");
  			response.setHeader("Cache-Control", "no-cache, must-revalidate");
  			response.setHeader("Pragma", "no-cache");
  			response.getWriter().write(str.toString());
  			response.getWriter().flush();
  			response.getWriter().close();
  		} catch (Exception e) {
  			// TODO: handle exception
  		}
  		
  	}