Home > Developer > JavaScript
Example code of Angular zTree integration, angularztree
1. Prerequisites
1.1 create an angular4 Project
Refer to blog: Click to go
1.2 Go To The zTree official website to download zTree
ZTree Official Website: Click to go
2 programming steps
From the output of the zTree object, we can see that the zTree object uses the init method to implement the zTree structure. The init method receives three parameters.
Parameter 1: DOM Node object of a ul label
Parameter 2: basic configuration object
Parameter 3: title information array
2.1 introduce related js and css in index.html
<!doctype html>2.2 declare the jquery object in the TS File
declare var $ : any;2.3 write code in the TS File
Import {Component, OnInit} from '@ angular/core'; declare var $: any; @ Component ({selector: 'app-root', templateUrl :'. /app.component.html ', styleUrls :['. /app. component. scss ']}) export class AppComponent implements OnInit {// setting = {// view: {// showLine: true, // showIcon: true, // fontCss: this. getFont //}, // data: {// simpleData: {// enable: true, // idKey: 'id', // pIdKey: 'pi '//} //}, // Callback: {// onClick: this. onCzTreeOnClick //}; // zNodes = [// {id: 1, pId: 0, name: '1 level title', open: true, iconOpen: "assets/zTree/css/zTreeStyle/img/diy/export open.png", iconClose: "assets/zTree/css/zTreeStyle/img/diy/export close.png"}, // {id: 11, pId: 1, name: '1. 1 Level 2 Heading ', open: true, font: {'background-color': 'skyblue', 'color': 'White '}, // {id: 111, pId: 11, name: '1. 1.1 Level 3 title-> blog ', Url: 'http: // www.cnblogs.com/NeverCtrl-C/'}, // {id: 112, pId: 11, name: '1. 1.2 Level 3 title-> click ', click: "alert (' you clicked ')"}, // {id: 12, pId: 1, name: '1. 2 Level 2 Heading '}, // {id: 2, pId: 0, name: '2 Level 1 title'} //] // 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: '1 Level 1 title'}, {id: 11, pId: 1, name: '1. 1 Level 2 Heading '},{ id: 111, pId: 11, name: '1. 1.1 Level 3 heading '}, {id: 112, pId: 11, name: '1. 1.2 Level 3 heading '}, {id: 12, pId: 1, name: '1. 2 Level 2 Heading '}, {id: 2, pId: 0, name: '2 Level 1 title'}]; constructor () {} ngOnInit () {console. log ($); console. log ($. fn. zTree); $. fn. zTree. init ($ ("# ztree"), this. setting, this. zNodes );}}2.4 write code in component HTML
<ul id="ztree" class="ztree"><ul></ul>2.5 Effect display
3. Basic zTree Functions
3.1 do not display connection lines
3.1.1 official documentation
Do not display the connection lines between titles
3.1.2 programming steps
Set the value of the showLine attribute to false in the basic configuration object.
setting = { data: { simpleData: { enable: true } }, view: { showLine: false } };3.2 do not display the node icon
3.2.1 official documentation
Remove the icon before the node
3.2.2 programming steps
Set the showIcon attribute of the basic configuration object to false.
setting = { data: { simpleData: { enable: true } }, view: { showLine: false, showIcon: false } };3.3 custom node icon
3.3.1 official documentation
Change the node icon
3.3.2 programming steps
Set the icon/iconOpen/iconClose attribute for the treeNode node data.
3.4 Custom font
3.4.1 official documentation
Change the node Font Style
3.4.2 programming steps
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 that of the style.
3.4.3 effect display
3.5 hyperlink
3.5.1 official documentation
Click the node title to automatically jump to the corresponding url
Note 01: The click attribute can only perform the simplest click Event operation. It is equivalent to onclick =. If the operation is complex, use the onClick Event Callback Function.
3.5.2 programming steps
Set the url and click attributes for the treeNode node data.
Tip 01: when setting the click attribute, the attribute value must be a simple onClick event.
Tip 02: when setting the target attribute, the attribute values include _ blank and _ self.
_ Blank-> open in a new window
_ Self-> open in the original window
ZNodes = [{id: 1, pId: 0, name: '1 Level 1 title', open: true, iconOpen: "assets/zTree/css/zTreeStyle/img/diy/export open.png", iconClose: "assets/zTree/css/zTreeStyle/img/diy/export close.png"}, {id: 11, pId: 1, name: '1. 1 Level 2 Heading ', open: true, font: {'background-color': 'skyblue', 'color': 'white' }}, {id: 111, pId: 11, name: '1. 1.1 Level 3 title-> blog 1', url: 'http: // www.cnblogs.com/NeverCtrl-C/', target: '_ blank'}, {id: 113, pId: 11, name: '1. 1.1 Level 3 title-> blog garden 2', url: 'http: // www.cnblogs.com/NeverCtrl-C/', target: '_ self'}, {id: 112, pId: 11, name: '1. 1.2 Level 3 title-> click ', click: "alert (' you clicked ')"}, {id: 12, pId: 1, name: '1. 2 Level 2 Heading '}, {id: 2, pId: 0, name: '2 Level 1 title'}]3.6 click Control
3.6.1 official documentation
Trigger corresponding method when you click the node title
Tip 01: You can use this method in angular to achieve route jump.
3.6.2 programming steps
Set the onClick attribute of the basic configuration object
Tip 01: The onClick attribute value is a reference to a method. We need to compile this method by ourselves.
setting = { view: { showLine: true, showIcon: true, fontCss: this.getFont }, data: { simpleData: { enable: true, idKey: 'id', pIdKey: 'pId' } }, callback: { onClick: this.onCzTreeOnClick } };Compile onClick trigger Method
onCzTreeOnClick(event, treeId, treeNode, clickFlag) { alert(treeNode.name); }The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
