zTree使用指南-优快云博客

本文链接：https://blog.youkuaiyun.com/buglei123/article/details/102425107

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

作用

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

image

导入

把文件复制过去就可以了

image

jsp中引入

<link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>

使用

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

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

一级树

        <ul id="ztree1" class="ztree"></ul>
                <script type="text/javascript">
                    $(function() {
                        var setting = {};
                        
                        var zNodes = [
                                        {"name":"节点一"},
                                        {"name":"节点二"},
                                        {"name":"节点三"}
                                     ];
                        
                        $.fn.zTree.init($("#ztree1"), setting, zNodes);
                    });
                </script>

效果：

image

二级树

<ul id="ztree1" class="ztree"></ul>
<script type="text/javascript">
  $(function() {
    var setting = {};
    
    var zNodes = [
            {"name":"节点一","children":[
                            {"name":"二级节点一"},
                            {"name":"二级节点二"},
                            {"name":"二级节点三"}
                          ]
            },
            {"name":"节点二"},
            {"name":"节点三"}
             ];
    
    $.fn.zTree.init($("#ztree1"), setting, zNodes);
  });
</script>

效果：

image

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

<ul id="ztree2" class="ztree"></ul>
<script type="text/javascript">
  $(function() {
    var setting2 = {
        data: {
          simpleData: {
            enable: true//使用简单json数据构造ztree节点
          }
        }
    };
    
    var zNodes2 = [
                    {"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
                    {"id":"2","pId":"3","name":"节点二"},
                    {"id":"3","pId":"0","name":"节点三"}
             ];
    
    $.fn.zTree.init($("#ztree2"), setting2, zNodes2);
  });
</script>

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