简介

树形控件的使用是应用开发过程中必不可少的。zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。

zTree 特点

最新版的zTree将核心代码按照功能进行了分割，不需要的代码可以不用加载，如普通使用只需要加载核心的jquery.ztree.core-3.5.js，需要使用勾选功能加载jquery.ztree.excheck-3.5.min.js，需要使用编辑功能加载jquery.ztree.exedit-3.5.min.js
采用了延迟加载技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀
兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器
支持 JSON 数据
支持静态 和 Ajax 异步加载节点数据
支持任意更换皮肤 / 自定义图标（依靠css）
支持极其灵活的 checkbox 或 radio 选择功能
提供多种事件响应回调
灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽

使用

1.  引入 ztree.css 、ztree.js 和 jquery.js 文件

2.  HTML

<div>
   <ul id= "treeDemo" class= "ztree" ></ul>
 </div>

3.  调用

<SCRIPT LANGUAGE= "JavaScript" >
   var zTreeObj;
   var setting = {};  // zTree 的参数配置，后面详解
    var zNodes = [   // zTree 的数据属性，此处使用标准json格式
    {
    name: "test1" , open: true , children: [
    { name: "test1_1" }, { name: "test1_2" }]
   },
   {
    name: "test2" , open: true , children: [
    { name: "test2_1" }, { name: "test2_2" }]
   }
   ];
   $(document).ready( function () {
    zTreeObj = $.fn.zTree.init($( "#treeDemo" ), setting, zNodes); 
    //初始化zTree，三个参数一次分别是容器(zTree 的容器 className 别忘了设置为 "ztree")、参数配置、数据源
   });
  </SCRIPT>

相关链接

官网地址 ：http://www.treejs.cn

码云地址：https://gitee.com/zTree/zTree_v3

bootCDN下载地址 ：https://www.bootcdn.cn/zTree.v3/