zTree.js study notes

1 Introduction

zTree rely on is a versatile "plug-tree" jQuery implementation. Combination of excellent performance, flexible configuration, various functions of the biggest advantages is zTree

Official website: http://www.treejs.cn/v3/main.php#_zTreeInfo

2. Basic use

(1) introducing the jQuery
(2) and introduced zTree css file js files
(3) setting configuration parameters and node data
(4) and passing configuration information to initialize (container id, configuration, node data)

<!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>

effect:

3. Description node data

Standard requires JSON data comprises nested parent-child node relationships represent, for example:

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

The default node is folded open can be determined by setting the value of the attribute node is expanded or collapsed

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"}
      ]}
   ]

Adding to the node icon to
add icon / iconOpen / iconClose property in the target node is located, is the picture of his address, zTree.js will set this picture as a background image.
And iconSkin className attribute may be added for the node, for custom background pattern of FIG.

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 we add to test, it is rendered as test_ico_docu

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

Set css styles

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

zTree.js study notes

1 Introduction

2. Basic use

3. Description node data

Guess you like