Jquery树插件zTree实现菜单树
本文实例为大家分享了zTree插件实现菜单树的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="utf-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<title>Title</title>
<linkhref="JS/tool/zTree/css/zTreeStyle/zTreeStyle.css"rel="stylesheet"/>
<scriptsrc="JS/jquery-1.11.1.min.js"></script>
<scriptsrc="JS/tool/zTree/js/jquery.ztree.core-3.5.js"></script>
<scriptsrc="JS/tool/zTree/js/jquery.ztree.excheck-3.5.js"></script>
</head>
<bodystyle="background:#ddd;">
<divclass="mainbody-left">
<divclass="vvtreedept-treeleft">
<ulid="menu_tree_left"class="ztree"></ul>
</div>
</div>
<script>
varsettingLeft={
view:{
dblClickExpand:false,//双击节点时，是否自动展开父节点的标识
showLine:false,//是否显示节点之间的连线
showIcon:true,
fontCss:{'color':'white','font-weight':'normal'},//字体样式函数
selectedMulti:false//设置是否允许同时选中多个节点
},
check:{
//chkboxType:{"Y":"ps","N":"ps"},
chkStyle:"checkbox",//复选框类型
enable:false//每个节点上是否显示CheckBox
},
data:{
simpleData:{//简单数据模式
enable:true,
idKey:"id",
pIdKey:"pId",
rootPId:""
}
},
callback:{
beforeClick:function(treeId,treeNode){
zTree=$.fn.zTree.getZTreeObj("menu_tree_vehicle");
if(treeNode.isParent){
zTree.expandNode(treeNode);//如果是父节点，则展开该节点
}else{
zTree.checkNode(treeNode,!treeNode.checked,true,true);//单击勾选，再次单击取消勾选
}
}//,
//onCheck:onCheck
}
};
$(function(){
//初始化菜单树
varzNodes=[
{id:0,pId:-1,name:"一级部门",open:true},
{id:1,pId:0,name:"二级部门1",open:false},
{id:2,pId:1,name:"三级部门1"},
{id:3,pId:1,name:"三级部门2"},
{id:4,pId:0,name:"二级部门2",open:false},
{id:5,pId:4,name:"三级部门3"},
{id:6,pId:4,name:"三级部门4",open:false},
{id:7,pId:6,name:"四级部门1"},
{id:8,pId:6,name:"四级部门2"},
{id:9,pId:0,name:"二级部门3"},
{id:10,pId:0,name:"二级部门4"}
];
$.fn.zTree.init($("#menu_tree_left"),settingLeft,zNodes);
});
</script>
</body>
</html>
更多关于ztree控件的内容，请参考专题《jQuery插件ztree使用汇总》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。