组织树ztree.js基本用法

项目中经常会用到下图所示的组织树，今天仔细研究下官方文档，在这里把一些入门的技巧记录下来。

【简介】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"}

]

• 很多其他功能，如异步加载，根据参数搜索节点，添加单复选框，拖拽增删编辑，以及其他可扩展样式功能，具体请参照官方文档。

三、注意事项

点击可直接下载源文件