简 介
- zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点
- zTree 是开源免费的软件, 使用 MIT 许可证
- zTree v3.x 将核心代码按照功能进行了分割，不需要的代码可以不用加载)
- 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
- 兼容 IE、FireFox?、Chrome、Opera、Safari 等浏览器
- 支持 JSON 数据，支持静态 和 Ajax 异步加载节点数据
- 支持任意更换皮肤 / 自定义图标
- 支持极其灵活的 checkbox 或 radio 选择功能
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽哟
- 在一个页面内可同时生成多个 Tree 实例
官网下载
第一个例子
官方例子
- 下载的文件中有个"Demo"目录，所以就参考其中的示例即可
自己改写
新建项目
导入css
- 虽然上面的官方例子中只导入了demo.css文件，但其实demo.css内部是关联了另外的css或者文件夹里面的图片
- 所以建议将css目录下的所以文件全部导入
导入JS
- js导入时同理，虽然上面的官网例子只导入了两个，但因为它们内部会调用其它的js文件，所以建议全部导入即可
- 因为现在是开发学习阶段，所以导入非min版的，部署阶段可以换成min版的
- jquery-1.4.4.min.js可以换成更高版本的文件，比较现在如BootStrap等插件已经不支持这么低版本的JQuery了
编写Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准数据格式</title>
<link rel="stylesheet" href="../css/demo.css" type="text/css">
<link rel="stylesheet" href="../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../js/jquery.ztree.core.js"></script>
<script type="text/javascript">
var setting = { };
var zNodes =[
{ name:"父节点1 - 展开", open:true,
children: [
{ name:"父节点11 - 折叠",
children: [
{ name:"叶子节点111"},
{ name:"叶子节点112"},
{ name:"叶子节点113"},
{ name:"叶子节点114"}
]},
{ name:"父节点12 - 折叠",
children: [
{ name:"叶子节点121"},
{ name:"叶子节点122"},
{ name:"叶子节点123"},
{ name:"叶子节点124"}
]},
{ name:"父节点13 - 没有子节点", isParent:true}
]},
{ name:"父节点2 - 折叠",
children: [
{ name:"父节点21 - 展开", open:true,
children: [
{ name:"叶子节点211"},
{ name:"叶子节点212"},
{ name:"叶子节点213"},
{ name:"叶子节点214"}
]},
{ name:"父节点22 - 折叠",
children: [
{ name:"叶子节点221"},
{ name:"叶子节点222"},
{ name:"叶子节点223"},
{ name:"叶子节点224"}
]},
]},
{ name:"父节点3 - 没有子节点", isParent:true}
];
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
</script>
</head>
<body>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
</html>
测试结果
