当前位置: 代码迷 >> Java Web开发 >> zTree自动生成左侧菜单有关问题
  详细解决方案

zTree自动生成左侧菜单有关问题

热度:355   发布时间:2016-04-16 21:48:48.0
zTree自动生成左侧菜单问题
项目框架:springMVC。
zTree 版本:3.5
问题:在自动生成左侧菜单时,不能形成父子关系,全部展开。

页面代码:

<SCRIPT type="text/javascript">
<!--
var curMenu = null, zTree_Menu = null;
var treeNodes;
var setting = {

async:{
enable:true,
dataType: "text",
autoParam:["id","pId"],
type:"post",
url:"/BIAoa/menu/menuTree.bia"
},
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
},
callback: {
onNodeCreated: this.onNodeCreated,
beforeClick: this.beforeClick
}
};



function beforeClick(treeId, node) {
if (node.isParent) {
if (node.level === 0) {
var pNode = curMenu;
while (pNode && pNode.level !==0) {
pNode = pNode.getParentNode();
}
if (pNode !== node) {
var a = $("#" + pNode.tId + "_a");
a.removeClass("cur");
zTree_Menu.expandNode(pNode, false);
}
a = $("#" + node.tId + "_a");
a.addClass("cur");

var isOpen = false;
for (var i=0,l=node.children.length; i<l; i++) {
if(node.children[i].open) {
isOpen = true;
break;
}
}
if (isOpen) {
zTree_Menu.expandNode(node, true);
curMenu = node;
} else {
zTree_Menu.expandNode(node.children[0].isParent?node.children[0]:node, true);
curMenu = node.children[0];
}
} else {
zTree_Menu.expandNode(node);
}
}
return !node.isParent;
}

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
zTree_Menu.selectNode(curMenu);
var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
a.addClass("cur");
});
//-->
</SCRIPT>


取到的json数据格式:

[
{"id":1,"pId":0,"name":"系统管理","url":null,"isParent":true},
{"id":2,"pId":0,"name":"业务管理","url":null,"isParent":true},
{"id":3,"pId":0,"name":"个人管理","url":null,"isParent":true},
{"id":11,"pId":1,"name":"角色管理","url":"system/roleManage.bia","isParent":false},
{"id":12,"pId":1,"name":"权限管理","url":"system/rightManage.bia","isParent":false},
{"id":13,"pId":1,"name":"用户管理","url":"system/userManage.bia","isParent":false},
{"id":14,"pId":1,"name":"系统日志","url":"system/logShow.bia","isParent":false},
{"id":15,"pId":1,"name":"项目类别","url":"system/projectKind.bia","isParent":false},
{"id":21,"pId":2,"name":"客户管理","url":"project/customerInfo.bia","isParent":false},
{"id":22,"pId":2,"name":"项目管理","url":"project/projectManage.bia","isParent":false},
{"id":23,"pId":2,"name":"合同管理","url":"project/contractManage.bia","isParent":false},
{"id":24,"pId":2,"name":"项目资金","url":"project/fundManage.bia","isParent":false},
{"id":25,"pId":2,"name":"项目实施","url":"project/projectAllotShow.bia","isParent":false},
{"id":31,"pId":3,"name":"个人设置","url":"single/singleSetting.bia","isParent":false}
]


最后的效果:
系统管理
业务管理
个人管理
角色管理
权限管理
用户管理
系统日志
项目类别
客户管理
项目管理
合同管理
项目资金
项目实施
个人设置

就是全部展开,没有父子关系,没有展开和隐藏。
------解决思路----------------------
引用:
我页面JS改成如下: 

<SCRIPT type="text/javascript">
<!--
var curMenu = null, zTree_Menu = null;
var treeNodes=null;
var setting = {

async:{
enable:true,
dataType: "text",
autoParam:["id","pId"],
type:"post",
url:"/BIAoa/menu/menuTree.bia"
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0,
}
},
view: {
showLine: true,
selectedMulti: false,
dblClickExpand: false
}
};

$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting,treeNodes);
});
//-->
</SCRIPT>


结果只能显示三个父亲节点,点击打不开子节点。

哦,那前台还报啥错误吗?
------解决思路----------------------
把你的view.dblClickExpand设置为true,然后双击父节点即可打开,因为你这个样式没有icon了,所以只能双击打开,不能像demo那样单击ico打开。