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使用汇总》
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。