标签：tree 更改 功能 插件 关于 esb 否则 lte 示例
关于Jquery和Ztree的应用和总结树状结构目录显示比较流行的有dtree、xtree、EXTtree、E3tree、ztree。
Ztree是所有中功能最强大的树。Dtree和Xtree已经逐步淘汰，EXTtree、E3tree功能不全。
ZTree是一个依靠 jQuery 实现的多功能 “树插件”，支持选择框等显示，动态更改图标，提供多种事件响应回调，而且异步数据功能强大。
示例如下：
添加相关CSS和js库
<head>
<meta charset="utf-8" />
//添加相关的ztree的css
<link rel="stylesheet" href="../plugins/jQueryZtree/demo.css" />
<link rel="stylesheet" href="../plugins/jQueryZtree/zTreeStyle.css" />
//添加相关的jquery和ztree的js库
<script src="../plugins/jQueryZtree/jquery-1.4.4.min.js"></script>
<script src="../plugins/jQueryZtree/jquery.ztree.core-3.5.js"></script>
<script src="../plugins/jQueryZtree/jquery.ztree.excheck-3.5.min.js"></script>
<SCRIPT type="text/javascript">
<!--
var setting = {
check: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
onCheck: onCheck
}
};
function filter(node) { //过滤器直选中2级节点累加
return (node.checked == true);
}
function onCheck(e, treeId, treeNode) {
var pNode = treeNode;
var pNodePath = "";
while(!!pNode){
pNodePath = "\\"+ pNode.name + pNodePath;
pNode = pNode.getParentNode();
}
alert(pNodePath);
/*
var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo").getNodesByFilter(filter);
for(var i = 0,len = zTreeObj.length; i < len; i++){
alert(zTreeObj[i].name);
}
*/
}
var zNodes =[
{ name:"父节点1 - 展开", open:true,
children: [
{ name:"父节点11 - 折叠",
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
{ name:"父节点12 - 折叠",
children: [
{ name:"叶子节点121"},
{ name:"叶子节点122"},
{ name:"叶子节点123"},
{ name:"叶子节点124"}
]},
{ name:"父节点13 - 没有子节点", isParent:true}
]},
{ name:"父节点2 - 折叠",
children: [
{ name:"父节点21 - 展开", open:true,
children: [
{ name:"叶子节点211"},
{ name:"叶子节点212"},
{ name:"叶子节点213"},
{ name:"叶子节点214"}
]},
{ name:"父节点22 - 折叠",
children: [
{ name:"叶子节点221"},
{ name:"叶子节点222"},
{ name:"叶子节点223"},
{ name:"叶子节点224"}
]},
{ name:"父节点23 - 折叠",
children: [
{ name:"叶子节点231"},
{ name:"叶子节点232"},
{ name:"叶子节点233"},
{ name:"叶子节点234"}
]}
]},
{ name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
var zTree = $.fn.zTree.getZTreeObj("treeDemo")
//配置ztree同时选中父节点和子节点
zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" };
});
//-->
</SCRIPT>
</head>
<body>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</body>注意在head中的JavaScript标签，标签里面要加上<!--//-->，否则部分JavaScript可能无法执行，比如普通for循环就不能执行
<SCRIPT type="text/javascript">
<!--
for(var i = 0; i < 3; i++){
alert(i);
}
//-->
</SCRIPT>标签：tree 更改 功能 插件 关于 esb 否则 lte 示例
原文地址：https://blog.51cto.com/zhaoanan/2528116
