How to integrate zTree code in Angular-JS Tutorial-php.cn

This article mainly introduces the sample code of Angular integrating zTree. Now I will share it with you and give you a reference.

1 Prerequisite preparation

1.1 Create a new angular4 project

Reference blog post: Click to go

1.2 Go to zTree official website to download zTree

zTree official website: Click to go to

##2 Programming steps

It can be seen from printing out the zTree object that the zTree object uses the init method to implement the zTree structure; the init method receives three parameters

Parameter 1: A DOM node object with an ul tag

Parameter 2: Basic configuration object

Parameter 3: Title information array

2.1 Introduce relevant js and css into index.html

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>TestZtree</title>
 <base href="/" rel="external nofollow" >

 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="icon" type="image/x-icon" href="favicon.ico" rel="external nofollow" >

 <link rel="stylesheet" type="text/css" href="./assets/zTree/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="./assets/zTree/css/demo.css" rel="external nofollow" >
 <script src="./assets/zTree/js/jquery-1.4.4.min.js"></script>
 <script src="./assets/zTree/js/jquery.ztree.core.js"></script>
</head>
<body>
 <app-root></app-root>
</body>
</html>

Copy after login

2.2 Declare jquery object in TS file

declare var $ : any;

Copy after login

2.3 Write code in TS file

import { Component, OnInit } from &#39;@angular/core&#39;;
declare var $ : any;

@Component({
 selector: &#39;app-root&#39;,
 templateUrl: &#39;./app.component.html&#39;,
 styleUrls: [&#39;./app.component.scss&#39;]
})
export class AppComponent implements OnInit {

 // setting = {
 //  view: {
 //    showLine: true,
 //    showIcon: true,
 //    fontCss: this.getFont
 //  },
 //  data: {
 //   simpleData: {
 //    enable: true,
 //    idKey: &#39;id&#39;,
 //    pIdKey: &#39;pId&#39;
 //   }
 //  },
 //  callback: {
 //   onClick: this.onCzTreeOnClick
 //  }
 // };

 // zNodes = [
 //  {id: 1, pId: 0, name: &#39;1 一级标题&#39;, open: true, iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},
 //  {id: 11, pId: 1, name: &#39;1.1 二级标题&#39;, open: true, font:{&#39;background-color&#39;:&#39;skyblue&#39;, &#39;color&#39;:&#39;white&#39;}},
 //  {id: 111, pId: 11, name: &#39;1.1.1 三级标题 -> 博客园&#39;, url: &#39;http://www.cnblogs.com/NeverCtrl-C/&#39;},
 //  {id: 112, pId: 11, name: &#39;1.1.2 三级标题 -> 单击&#39;, click: "alert(&#39;你单击了&#39;)"},
 //  {id: 12, pId: 1, name: &#39;1.2 二级标题&#39;},
 //  {id: 2, pId: 0, name: &#39;2 一级标题&#39;}
 // ]

 // getFont(treeId, node) {
 //  return node.font ? node.font : {};
 // }


 // onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
 //  alert(treeNode.name);
 // }    

 setting = {
  data: {
   simpleData: {
    enable: true
   }
  }
 };
 zNodes = [
  {id: 1, pId: 0, name: &#39;1 一级标题&#39;},
  {id: 11, pId: 1, name: &#39;1.1 二级标题&#39;},
  {id: 111, pId: 11, name: &#39;1.1.1 三级标题&#39;},
  {id: 112, pId: 11, name: &#39;1.1.2 三级标题&#39;},
  {id: 12, pId: 1, name: &#39;1.2 二级标题&#39;},
  {id: 2, pId: 0, name: &#39;2 一级标题&#39;}
 ];

 constructor() { }
 
 ngOnInit() { 
  console.log($);
  console.log($.fn.zTree);
  $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 }
}

Copy after login

2.4 Write in component HTML Code

<ul id="ztree" class="ztree"><ul></ul>

Copy after login

2.5 Effect display

3 Basic functions of zTree

3.1 Do not display connecting lines

3.1.1 Official documentation

Does not display connecting lines between titles

3.1.2 Programming Steps

Specify the value of showLine attribute as false in the basic configuration object

 setting = {
  data: {
   simpleData: {
    enable: true
   }
  },
  view: {
   showLine: false
  }
 };

Copy after login

3.2 Do not display the node icon

3.2. 1 Official document

Remove the icon in front of the node

3.2.2 Programming steps

Set the showIcon attribute of the basic configuration object to false Just

setting = {
  data: {
   simpleData: {
    enable: true
   }
  },
  view: {
   showLine: false,
   showIcon: false
  }
 };

Copy after login

3.3 Customize the node icon

3.3.1 Official document

Change the node icon

3.3.2 Programming steps

Set the icon/iconOpen/iconClose attributes for the treeNode node data

3.4 Custom font

3.4.1 Official documentation

Change the style of node font

3.4.2 Programming steps

Just set the font attribute for the treeNode node data. The value of the font attribute is an object, and the content of the object is the same as the style data

3.4.3 Effect display

3.5 Hyperlink

3.5.1 Official document

Clicking on the node title will automatically jump to the corresponding url

Note 01: The click attribute can only perform the simplest click event operation. Equivalent to onclick="...". If the operation is more complex, use the onClick event callback function.

3.5.2 Programming steps

Set the url and click attributes for the treeNode node data

Tips 01: When setting the click attribute, the attribute value must be some simple onClick event

Tip 02: When setting the target attribute, the attribute values are _blank and _self

_blank -> Use one Open in new window

_self -> Open in original window

zNodes = [
  {id: 1, pId: 0, name: &#39;1 一级标题&#39;, open: true, iconOpen:"assets/zTree/css/zTreeStyle/img/diy/1_open.png", iconClose:"assets/zTree/css/zTreeStyle/img/diy/1_close.png"},
  {id: 11, pId: 1, name: &#39;1.1 二级标题&#39;, open: true, font:{&#39;background-color&#39;:&#39;skyblue&#39;, &#39;color&#39;:&#39;white&#39;}},
  {id: 111, pId: 11, name: &#39;1.1.1 三级标题 -> 博客园1&#39;, url: &#39;http://www.cnblogs.com/NeverCtrl-C/&#39;, target: &#39;_blank&#39;},
  {id: 113, pId: 11, name: &#39;1.1.1 三级标题 -> 博客园2&#39;, url: &#39;http://www.cnblogs.com/NeverCtrl-C/&#39;, target: &#39;_self&#39;},
  {id: 112, pId: 11, name: &#39;1.1.2 三级标题 -> 单击&#39;, click: "alert(&#39;你单击了&#39;)"},
  {id: 12, pId: 1, name: &#39;1.2 二级标题&#39;},
  {id: 2, pId: 0, name: &#39;2 一级标题&#39;}
 ]

Copy after login

3.6 Click Control

3.6.1 Official Document

The corresponding method is triggered when the node title is clicked

Tip 01: You can use this usage to implement route jump in angular

3.6.2 Programming steps

设置基本配置对象的onClick属性

技巧01：onClick属性值是一个方法的引用，我们需要自己编写这个方法

 setting = {
  view: {
    showLine: true,
    showIcon: true,
    fontCss: this.getFont
  },
  data: {
   simpleData: {
    enable: true,
    idKey: &#39;id&#39;,
    pIdKey: &#39;pId&#39;
   }
  },
  callback: {
   onClick: this.onCzTreeOnClick
  }
 };

Copy after login

编写onClick触发方法

 onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
  alert(treeNode.name);
 }

Copy after login

上面是我整理给大家的，希望今后会对大家有帮助。

jQuery实现的鼠标响应缓冲动画效果

在jQuery中如何实现鼠标响应式淘宝动画效果

在webpack中打包并将文件加载到指定的位置（详细教程）

在Webpack中路径压缩图片上传尺寸获取的问题（详细教程）

The above is the detailed content of How to integrate zTree code in Angular. For more information, please follow other related articles on the PHP Chinese website!