ztree插件的使用

在项目中,因为每个用户拥有的功能不同,所以进入管理系统以后,所显示的目录书也不同。我们选择了使用zTree插件。

ztree插件中提供了很多种树的样式。使用简单json生成树。只需要后端向页面传输 id,url,pId,name四种值,即可在前端显示树的类型。当然,需要在iframe标签中内嵌页面的时候,需要在主页面加入



最后,需要修改ztree的core.js文件。jquery-ztree-core

 

如需要显示不同的样式,需要查看demo进行操作。本菜鸟,在生成树的页面内,引入以下代码即可有只允许单枝开启的功能。

var setting = {
view: {
dblClickExpand: false,
showLine: false
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeExpand: beforeExpand,
onExpand: onExpand,
onClick: onClick
}
};
var curExpandNode = null;
function beforeExpand(treeId, treeNode) {
var pNode = curExpandNode ? curExpandNode.getParentNode():null;
var treeNodeP = treeNode.parentTId ? treeNode.getParentNode():null;
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
for(var i=0, l=!treeNodeP ? 0:treeNodeP.children.length; i<l; i++ ) {
if (treeNode !== treeNodeP.children[i]) {
zTree.expandNode(treeNodeP.children[i], false);
}
}
while (pNode) {
if (pNode === treeNode) {
break;
}
pNode = pNode.getParentNode();
}
if (!pNode) {
singlePath(treeNode);
}

}
function singlePath(newNode) {
if (newNode === curExpandNode) return;

var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
rootNodes, tmpRoot, tmpTId, i, j, n;

if (!curExpandNode) {
tmpRoot = newNode;
while (tmpRoot) {
tmpTId = tmpRoot.tId;
tmpRoot = tmpRoot.getParentNode();
}
rootNodes = zTree.getNodes();
for (i=0, j=rootNodes.length; i<j; i++) {
n = rootNodes[i];
if (n.tId != tmpTId) {
zTree.expandNode(n, false);
}
}
} else if (curExpandNode && curExpandNode.open) {
if (newNode.parentTId === curExpandNode.parentTId) {
zTree.expandNode(curExpandNode, false);
} else {
var newParents = [];
while (newNode) {
newNode = newNode.getParentNode();
if (newNode === curExpandNode) {
newParents = null;
break;
} else if (newNode) {
newParents.push(newNode);
}
}
if (newParents!=null) {
var oldNode = curExpandNode;
var oldParents = [];
while (oldNode) {
oldNode = oldNode.getParentNode();
if (oldNode) {
oldParents.push(oldNode);
}
}
if (newParents.length>0) {
zTree.expandNode(oldParents[Math.abs(oldParents.length-newParents.length)-1], false);
} else {
zTree.expandNode(oldParents[oldParents.length-1], false);
}
}
}
}
curExpandNode = newNode;
}

function onExpand(event, treeId, treeNode) {
curExpandNode = treeNode;
}

function onClick(e,treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.expandNode(treeNode, null, null, null, true);
}
$(document).ready(function(){
//ajax请求数据
$.get("/property/back/menus",{},function(data){
$.fn.zTree.init($("#treeDemo"), setting, data);
//展开
//var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
// treeObj.expandAll(true);
});
});

发表评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.