zTree

---

layout: post
title: zTree
subtitle: 简单使用
date: 2018-06-20
author: ZL
header-img: img/20180620.jpg
catalog: true
tags:
- zTree

---

作用

前端中制作树状列表的，就像这个样子：

image

导入

把文件复制过去就可以了

image

jsp中引入

使用

var setting = {};里面配置一些设置，如果全部使用默认可以不配。
var zNodes = [];里面通过json配置节点内容。

方式一：使用标准json数据构造ztree，了解

一级树

效果：

image

二级树

效果：

image

方式二：使用简单json数据构造ztree

• id表示当前节点的id，pId表示父节点的id（注意pId的大小写）
• 注意在setting中将simpleData设置为true

效果：

image

ztree的点击事件

image

为条目设置点击事件。

修改settings里面的参数配置,callback

var setting3 = {
    data: {
      simpleData: {
        enable: true//使用简单json数据构造ztree节点
      }
    },
    //开启点击事件
    callback:{
      onClick: function(event, treeId, treeNode){
        alert(treeNode.name);//treeNode.name就是json里面的条目的name。  
      }
    }
};

效果
点击某个条目就弹出alert

image

ztree API的官网

http://www.treejs.cn/v3/api.php