今天实现了zTree的保持展开单一路径
什么意思呢,保持展开单一路径就是说:同一级别的节点,只打开一个,类似下面的简单演示,点击node1,展开显示1和2,点击node2,会关闭node1,展开显示3和4
+root +root
-node1 +node1
1 -node2
2 3
+node2 4
+node3 +node3
实现如下:
核心代码
//保持单一展开路径 function singlePath(currNode) { //console.log(currNode); //节点级别,即节点展开的等级,是爸爸辈还是儿子辈 var cLevel = currNode.level; //这里假设id是唯一的 var cId = currNode.id; //此对象可以保存起来,没有必要每次查找 var treeObj = $.fn.zTree.getZTreeObj("treeDemo"); /** * 展开的所有节点,这是从父节点开始查找(也可以全文查找) * 从当前节点的父节点开始查找,看有没有打开的节点,如果有则判断,若为同一级别的不同节点,则关闭,否则不关闭 */ var expandedNodes = treeObj.getNodesByParam("open", true, currNode.getParentNode()); console.log(expandedNodes); for(var i = expandedNodes.length - 1; i >= 0; i--){ var node = expandedNodes[i]; var level = node.level; var id = node.id; if (cId != id && level == cLevel) { treeObj.expandNode(node, false); } } }
实例
<SCRIPT type="text/javascript">
<!--
var curMenu = null, zTree_Menu = null;
var setting = {
view: {
showLine: true,
showIcon: true,
selectedMulti: false,
dblClickExpand: false,
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeExpand: zTreeBeforeExpand //BLISS
}
};
var zNodes =[
{ id:1, pId:0, name:"文件夹"},
{ id:11, pId:1, name:"收件箱"},
{ id:111, pId:11, name:"收件箱1"},
{ id:112, pId:111, name:"收件箱2"},
{ id:113, pId:112, name:"收件箱3"},
{ id:114, pId:113, name:"收件箱4"},
{ id:12, pId:1, name:"垃圾邮件"},
{ id:13, pId:1, name:"草稿"},
{ id:14, pId:1, name:"已发送邮件"},
{ id:15, pId:1, name:"已删除邮件"},
{ id:3, pId:0, name:"快速视图"},
{ id:31, pId:3, name:"文档"},
{ id:32, pId:3, name:"照片"}
];
//展开回调函数
function zTreeBeforeExpand(treeId, treeNode) {
singlePath(treeNode);
return true;
};
//保持单一展开路径
function singlePath(currNode) {
//console.log(currNode);
//节点级别,即节点展开的等级,是爸爸辈还是儿子辈
var cLevel = currNode.level;
//这里假设id是唯一的
var cId = currNode.id;
//此对象可以保存起来,没有必要每次查找
var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
/**
* 展开的所有节点,这是从父节点开始查找(也可以全文查找)
* 从当前节点的父节点开始查找,看有没有打开的节点,如果有则判断,若为同一级别的不同节点,则关闭,否则不关闭
*/
var expandedNodes = treeObj.getNodesByParam("open", true, currNode.getParentNode());
console.log(expandedNodes);
for(var i = expandedNodes.length - 1; i >= 0; i--){
var node = expandedNodes[i];
var level = node.level;
var id = node.id;
if (cId != id && level == cLevel) {
treeObj.expandNode(node, false);
}
}
}
/*//刷新当前展开节点的子节点
function RefreshZTree()
{
if(lastExpandNode != null)
{
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.reAsyncChildNodes(lastExpandNode, refresh);
}
};
//jquery定时刷新函数
function periodlyFunc()
{
RefreshZTree();
};*/
$(document).ready(function(){
var treeObj = $("#treeDemo");
$.fn.zTree.init(treeObj, setting, zNodes);
zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
curMenu = zTree_Menu.getNodes()[0];
zTree_Menu.selectNode(curMenu);
zTree_Menu.expandNode(curMenu);
//setInterval(periodlyFunc(), 5000); //bliss
});
//-->
</SCRIPT>
<div id="treeDemo" class="ztree">
</div>
ok!
推荐个网站:http://www.treejs.cn/v3/demo.php#_503
此为个人经验或看法,若有错误或不足,望路过大佬海涵和指点