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部分

<div id="bxzb" class="ztree"></div><!--记住引用ztree样式-->

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<Map<String,Object>> lst = queryQueryUtil.getQueryData(s);//获取需要的数据列
		
		
		List<String> nodeArray = new ArrayList<String>();
		
		nodeArray.add("{ \"id\":0, \"pId\":-1, \"name\":\"指标信息\",\"url\":\"\"}");
		
		int index=1;
		for (Map<String,Object> 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主要是通过标签来决定是否有子项如果是用<ul>标签包住然后里面的<li>有相应请求地址的，这种就代表是有子项的，不然就代码已经到子项了。

HTML部分

<ul class="simpleTree">
		<li class="root" id='0'><span>人员树</span>
			<ul>
				<li id='GROUP_00'><span>人员</span>
					<ul class="ajax">
						<li id='ALL'>{url:wtjlAction!getRyListForAjax.action?userType=1}</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>

服务器端：

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("<li id='" + ry.getJlid() + "' >");
				str.append(ry.getUserName());
				str.append("</li>");
			}

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