ztree简单使用

 

 

ztree是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。 
zTree 是开源免费的软件。

1.首先，使用ztree需要引入两个文件：

zTreeStyle.css以及jquery.ztree.all-3.5.js。

2.页面添加zTree的容器，class属性为ztree

<div id="pertree" class="ztree"></div>

3.引入数据

ztree 可以解析JSON结构的数据，有两种方式可以把数据传给ztree容器生成树结构

1）直接把json数据传给组件。

$(document).ready(function(){
    $.fn.zTree.init($("#pertree"), setting, zNodes);
});

2)异步获取json格式数据，第三个参数传null或者空着。

$(document).ready(function(){
    $.fn.zTree.init($("#pertree"), setting, null);
});

 树的配置

var setting = {
			check:{enable:true,nocheckInherit:true,chkboxType:{"Y":"ps","N":"ps"}},
			view:{selectedMulti:false,nameIsHTML: true, showLine: true,showIcon: true},
			data:{simpleData:{enable:true,idKey: "id",pIdKey: "pId",rootPId: 0},key:            
            {title:""}},
			callback:{
				beforeClick: function (treeId, treeNode, clickFlag) {
					var pertree = $.fn.zTree.getZTreeObj(treeId);
					pertree.checkNode(treeNode, !treeNode.checked, true, true);
					return false;
				}
			}
		}，pertree, loadTree = function(){
			$.get("${pageContext.request.contextPath }/group/getperTree/${group.id}", function(data) {
				pertree = $.fn.zTree.init($("#pertree"), setting, data); //.expandAll(true);
			}, null, null, "正在加载，请稍后...");
		};
		loadTree();

check：配置复选框.

view：配置树结构样式

data：配置接收的JSON数据格式

callback:回调函数

详细配置可查看API文档：http://www.treejs.cn/v3/api.php