项目中经常会用到下图所示的组织树，今天仔细研究下官方文档，在这里把一些入门的技巧记录下来。
[图片上传失败...(image-b1fd92-1548556294996)]
【简介】zTree 是一个依靠 jQuery 实现的多功能 “树插件”。形式多样，功能强大。
- 配置方式采用jQuery与JSON的语法结构，参数配置简单，较易上手。
- 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器，即使在IE6下也能很好的支持。
- 支持静态 和 Ajax 异步加载节点数据。
- 支持任意更换皮肤 / 自定义图标（依靠css）功能。
- 支持极其灵活的 checkbox 或 radio 选择功能。
- 提供多种事件响应回调。
- 灵活的编辑（增/删/改/查）功能，可随意拖拽节点，还可以多节点拖拽。
- 在一个页面内可同时生成多个 Tree 实例
一、准备工作
从官网github上下载源码，将css，img，js文件引入到项目中，如下所示：
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core.js"></script>
二、实例演示
官方api 已经非常详细介绍所有函数和参数设置，在这里只介绍最基本和常用的效果展示。
1、核心函数的配置
-
核心函数：zTree(setting, [zTreeNodes])
$(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); -
核心参数：setting。
zTree 的参数配置都在这里完成，如树的样式、事件、访问路径等都在这里配置。var setting = { view: { dblClickExpand: false, showLine: true, selectedMulti: false }, data: { simpleData: { enable:true, idKey: "id", pIdKey: "pId", rootPId: "" } };
具体参数的含义可参考官网。
-
核心参数：zTreeNodes。
zTree 的全部节点数据集合，采用由JSON对象组成的数据结构，简单来说，这里使用Json格式保存了树的所有信息。
zTreeNodes的格式分为两种：
1、标准json数据：标准的 JSON 数据需要嵌套表示节点的父子包含关系；var nodes = [ {name: "父节点1", children: [ {name: "子节点1"}, {name: "子节点2"} ]} ];2、简单模式的 JSON 数据：简单模式的 JSON 数据需要使用 id / pId 表示节点的父子包含关系。
var nodes = [ {id:1, pId:0, name: "父节点1"}, {id:11, pId:1, name: "子节点1"}, {id:12, pId:1, name: "子节点2"} ];
2、其他功能效果的演示
- 自定义图标
实现父节点的图标自定义，利用 节点数据的 icon / iconOpen / iconClose 属性实现；利用 节点数据的 iconSkin 属性 配合 css 实现自定义图标同样实现自定义图标。
var nodes = [
//父节点展开 折叠时使用相同的图标
{ name:"父节点1", icon:"/img/parent.gif"},
//父节点展开 折叠时分别使用不同的图标
{ name:"父节点2", iconOpen:"/img/open.gif", iconClose:"/img/close.gif"},
//叶子节点个性化图标
{ name:"叶子节点", icon:"/img/leaf.gif"},
//父节点展开 折叠时使用相同的图标
{ name:"父节点1", iconSkin:"diy01"},
//父节点展开 折叠时分别使用不同的图标
{ name:"父节点2", iconSkin:"diy02"},
//叶子节点个性化图标
{ name:"叶子节点", iconSkin:"diy03"}
]
- 很多其他功能，如异步加载，根据参数搜索节点，添加单复选框，拖拽增删编辑，以及其他可扩展样式功能，具体请参照官方文档。
