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