zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。
步骤 1、文件准备
步骤 2、编写 html 页面
<!DOCTYPE html> <HTML> <HEAD> <TITLE> ZTREE DEMO </TITLE> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" href="demo.css" type="text/css"> <link rel="stylesheet" href="zTreeStyle.css" type="text/css"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.ztree.all.min.js"></script> <SCRIPT LANGUAGE="JavaScript"> var zTreeObj; // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解） var setting = { view: { showLine: true } }; // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解） var zNodes = {name:"菜单信息", open:true, children:[ {name:"系统管理", open:true,children:[
//给每一个JSON对象绑定一个时间 {name:"角色管理","click":"test();"},{name:"用户管理"},{name:"部门管理"}]} , {name:"样品中心", open:true,children:[ {name:"被检者信息"},{name:"样本信息"}]} , {name:"实现中心", open:true,children:[ {name:"文库信息"},{name:"试剂盒信息"}]} , {name:"报告中心", open:true,children:[ {name:"报告管理"},{name:"数据统计"}]} , {name:"菜单管理", open:true,children:[ {name:"菜单管理"}]} ]}; //{name:"test2", open:true, children:[ // {name:"test2_1"}, {name:"test2_2"}]} //]; $(document).ready(function(){ zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); function test(){ alert("wwwwww"); } </SCRIPT> </HEAD> <BODY> <div> <ul id="treeDemo" class="ztree"></ul> </div> </BODY> </HTML>
结果展示：
具体属性设置以及具体的Ztree设置见API：
http://www.treejs.cn/v3/api.php