jqueryztree树的实现

来源：互联网发布：董洁的冷清秋知乎编辑：程序博客网时间：2024/04/30 15:28

首先我们在HTML 里面引用文件

        <link rel="stylesheet" type="text/css" href="js/JQuery-zTree-v3.5.15/css/zTreeStyle/zTreeStyle.css"> <script type="text/javascript" src="js/JQuery-zTree-v3.5.15/jquery.ztree.all-3.5.min.js"></script>

HTML代码

<ul id="menuTree" class="ztree">  </ul>

好了我们的JS代码

JS里面我们先定义我们树的数据

 // 树的JSON数据var zNodes =[    {id:1, pId:0, name:"家庭信息管理" , file:""},{id:101, pId:1, name:"家庭成员信息管理", file:"html/renyuaninfo.html"},{id:102, pId:1, name:"家庭成员权限管理", file:"html/quanxian.html"},{id:2, pId:0, name:"家庭收支管理"},{id:201, pId:2, name:"家庭收入状况", file:"html/jtsrzk.html"},{id:202, pId:2, name:"家庭支出状况", file:"html/jtzczk.html"},{id:203, pId:2, name:"家庭支出类别", file:"html/zhichufenlei.html"},{id:204, pId:2, name:"家庭收入类别", file:"html/shourufenlei.html"},{id:205, pId:2, name:"个人收入状况", file:"html/grsrgl.html"},{id:206, pId:2, name:"个人支出状况", file:"html/grzcgl.html"},{id:207, pId:2, name:"家庭财务状况分析", file:"peopleadd.html"},{id:208, pId:2, name:"特殊支出申请", file:"peopleadd.html"},{id:209, pId:2, name:"银行卡管理", file:"html/banknoinfo.html"},{id:3, pId:0, name:"家庭记录"},{id:301, pId:3, name:"家庭会议管理", file:"peopleselect.html"},{id:302, pId:3, name:"家庭人员处罚信息管理", file:"peopleselect.html"},{id:4, pId:0, name:"家庭生活小功能"},{id:401, pId:4, name:"生日纪念日列表", file:"peopleselect.html"},{id:402, pId:4, name:"家庭留言板", file:"peopleselect.html"},{id:403, pId:4, name:"生活作息表", file:"peopleselect.html"},{id:404, pId:4, name:"菜谱管理", file:"peopleselect.html"},{id:405, pId:4, name:"药谱管理", file:"peopleselect.html"}];

下面开始定义我们的树

var setting = {data: {simpleData: {enable: true}},view: {selectedMulti: false},callback: {onClick:function(e, id, node){var zTree = $.fn.zTree.getZTreeObj("menuTree");if(node.isParent) {zTree.expandNode();} else {addTabs(node.name, node.file);}}}};

显示树

$(function() {$.fn.zTree.init($("#menuTree"), setting, zNodes);var zTree = $.fn.zTree.getZTreeObj("menuTree");//中间部分tab$('#tabs').tabs({  border:false,fit:true,onSelect: function(title, index){var treeNode = zTree.getNodeByParam("name", title, null);zTree.selectNode(treeNode);}}); $('.index_panel').panel({    width:300,    height:200,    closable:true,  minimizable:true,  title: 'My Panel'});});

0 0