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>
时间： 2024-08-01 09:34:24