zTree 是一个依靠jQuery实现的多功能"树插件".优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点.
zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 支持静态 和 Ajax 异步加载节点数据 支持任意更换皮肤 / 自定义图标（依靠css） 支持极其灵活的 checkbox 或 radio 选择功能 提供多种事件响应回调 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟 在一个页面内可同时生成多个 Tree 实例 简单的参数配置实现 灵活多变的功能.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="../../css/demo.css" /> 7 <link rel="stylesheet" type="text/css" href="../../css/zTreeStyle/zTreeStyle.css"/> 8 <script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script> 9 <script type="text/javascript" src="../../js/jquery.ztree.core-3.5.js"></script> 10 11 </head> 12 <script type="text/javascript"> 13 var zTreeObj; 14 15 //zTree的参数配置 16 var setting={ 17 view: { 18 autoCancelSelected: true,//点击节点时,按下Ctrl或Cmd键是否允许取消选择操作 19 dblClickExpand: dblClickExpand,//双击节点时，是否自动展开父节点的标识 20 expandSpeed: "slow",//节点展开关闭的时候的速度 21 fontCss: setFontCss,//个性化文字样式,只针对zTree在节点上显示的<A>对象 22 selectedMulti: true,//允许是否同时选中多个节点 23 showIcon:true,//设置是否显示节点的图标 24 showLine:true,//是否显示节点之间的连线 25 showTitle:showTitleForTree,//是否显示节点的title提示信息 showTitle: false不提示信息 26 txtSelectedEnable: true//设置zTree是否允许可以选择zTree DOM内的文本 27 }, 28 data: { 29 simpleData: { 30 enable: true, 31 idKey: "id", 32 pIdKey: "pId", 33 rootPId: 0 34 } 35 } 36 }; 37 38 //zTree的数据属性 39 var zNodes=[ 40 {name:"test1",open:true, 41 children:[{name:"test1_1"},{name:"test1_2"}] 42 }, 43 {name:"test2",open:true, 44 children:[{name:"test2_1"},{name:"test2_2"}] 45 }, 46 {name:"test3",open:true, 47 children:[{name:"test3_1"},{name:"test3_2"}]} 48 ]; 49 50 //设置zTree仅仅level=0的父节点取消双击展开的功能 51 function dblClickExpand(treeId, treeNode) { 52 return treeNode.level == 0; 53 }; 54 55 //设置zTree仅仅level=1的节点不显示提示信息 56 function showTitleForTree(treeId, treeNode) { 57 return treeNode.level != 1; 58 }; 59 60 //设置level=0的节点name显示为红色 61 function setFontCss(treeId, treeNode) { 62 return treeNode.level == 0 ? {color:"red"} : {color:"green"}; 63 }; 64 65 $(document).ready(function(){ 66 zTreeObj = $.fn.zTree.init($("#tree"), setting, zNodes); 67 }); 68 69 </script> 70 <body> 71 <div> 72 <ul id="tree" class="ztree"></ul> 73 </div> 74 </body> 75 </html>