zTree.js学习笔记

1.简介

zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点

官网：http://www.treejs.cn/v3/main.php#_zTreeInfo

2.基本使用

(1)引入jQuery
(2)引入zTree的css文件和js文件
(3)配置参数和设置节点数据
(4)初始化并传入配置信息（容器id，配置，节点数据）

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!-- 引入zTree css -->
   <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
   <!-- 引入jquery -->
   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
   <!-- 引入zTree.js -->
   <script src="js/jquery.ztree.core.min.js"></script>
   <title>zTree.js demo</title>
</head>
<body>
   <!-- 创建容器 -->
   <ul id="treeDemo" class="ztree"></ul>
</body>
<script>
   var zTreeObj
   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）
   var setting = {}
   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
   var zNodes = [
      {name:"test1", open:true, children:[
         {name:"test1_1"}, {name:"test1_2"}]},
      {name:"test2", open:true, children:[
         {name:"test2_1"}, {name:"test2_2"}]}
   ]

   $(function(){
      //传入数据和配置
      zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
   })
</script>
</html>

效果：

3.节点数据说明

标准的 JSON 数据需要嵌套表示节点的父子包含关系，例如：

var nodes = [
    {name: "父节点1", children: [
        {name: "子节点1"},
        {name: "子节点2"}
    ]}
]

节点默认是折叠的，可以通过设置open属性的值来决定节点是否展开还是折叠

var zNodes = [
      {name:"默认", children:[
         {name:"节点1-1"}, {name:"节点1-2"}
      ]},
      {name:"展开的节点", open:true, children:[
         {name:"节点2-1"}, {name:"节点2-2"}
      ]},
      {name:"折叠的节点", open:false, children:[
         {name:"节点3-1"}, {name:"节点3-2"}
      ]}
   ]

为节点添加图标
在该节点所在的对象中添加 icon / iconOpen / iconClose 属性，他的值为图片地址，zTree.js会将此图片设置成背景图片。
而iconSkin属性可以为该节点添加className，用于自定义背景图的样式

var zNodes = [
      {name:"默认", children:[
         {name:"节点1-1"}, {name:"节点1-2"}
      ]},
      {name:"展开的节点", open:true, children:[
         {name:"节点2-1",icon:"img/ico_01.png",iconSkin:"test"}, 
         {name:"节点2-2",icon:"img/ico_02.png",iconSkin:"test"}
      ]},
      {name:"折叠的节点", open:false, children:[
         {name:"节点3-1"}, {name:"节点3-2"}
      ]}
   ]

我们添加的className为 test，被渲染成 test_ico_docu

<span class="button test_ico_docu" style="background:url(img/ico_01.png) 0 0 no-repeat;"></span>

设置css样式

<style>
.ztree li span.button.test_ico_docu {
    background-size: 100% 100% !important;
}
</style>

1.简介

2.基本使用

3.节点数据说明

猜你喜欢