组织树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"}

]

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

三、注意事项

点击可直接下载源文件

组织树ztree.js基本用法

组织树ztree.js基本用法

一、准备工作

二、实例演示

三、注意事项

猜你喜欢