Angular asynchronously loads node data with zTree, and angularztree

Last Update:2018-01-24 Source: Internet

Author: User

Tags export class

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Angular asynchronously loads node data with zTree, and angularztree

1. Prerequisites

1.1 create an angular4 Project

Reference: http://www.bkjia.com/article/119668.htm

1.2 Go To The zTree official website to download zTree

ZTree Official Website: Click to go

Version Used by sanshao: Click to go

1.3 refer to blog

Http://www.bkjia.com/article/133284.htm

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>View Code
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 );}}View Code
2.4 write code in component HTML
<ul 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 } };View Code
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. Content. 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'}]View Code
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 } };View Code
Compile onClick trigger Method

 onCzTreeOnClick(event, treeId, treeNode, clickFlag) { alert(treeNode.name); } View Code
3.6.3 code Summary
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: 'pid '}, callback: {onClick: this. onCzT ReeOnClick}, // async: {// enable: true, // url: "http: // localhost: 3000/data", // type: "get ", /// autoParam: ["id", "name = n", "level = lv"], // otherParam: {"otherParam": "zTreeAsyncTest "}, // dataFilter: this. filter // }}; 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 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: 1 2, pId: 1, name: '1. 2 Level 2 Heading '}, {id: 2, pId: 0, name: 'level 2 Heading'}] getFont (treeId, node) {return node. font? Node. font: {};}// filter (treeId, parentNode, responseData) {// console. log (responseData); // if (responseData) {// for (var I = 0; I <responseData. length; I ++) {// responseData [I]. name + = "dynamic node data" + responseData [I]. id; //} // return responseData; //} onCzTreeOnClick (event, treeId, treeNode, clickFlag) {alert (treeNode. name);} constructor () {} ngOnInit () {console. log ('print output jquery object'); console. log ($); console. log ('but because the zTree object is output'); console. log ($. fn. zTree); $. fn. zTree. init ($ ("# ztree"), this. setting, this. zNodes); // $. fn. zTree. init ($ ("# ztree"), this. setting );}}View Code
3.7 load node data Asynchronously
3.7.1 official documentation
The node data is obtained from the background.

3.7.2 programming steps
Tip 01: when loading node data asynchronously, The init method does not need to pass the third parameter.

> Prepare a background for returning data in JSON format.
Tip 01: The returned JSON data is a list in the format
[ { "id": 1, "pId": 0, "name": "1 one" }, { "id": 2, "pId": 0, "name": "2 two" } ]
Tip 02: sanshao is lazy. It uses background data simulated by json-server. Haha; json-server
> Set the async attribute of the basic configuration object

 setting = { view: { showLine: true, showIcon: true, fontCss: this.getFont }, data: { simpleData: { enable: true, idKey: 'id', pIdKey: 'pId' } }, callback: { onClick: this.onCzTreeOnClick }, async: { enable: true, url:"http://localhost:3000/data", type: "get", // autoParam:["id", "name=n", "level=lv"], // otherParam:{"otherParam":"zTreeAsyncTest"}, dataFilter: this.filter } };View Code
> Compile response data processing methods

Filter (treeId, parentNode, responseData) {console. log (responseData); if (responseData) {for (var I = 0; I <responseData. length; I ++) {responseData [I]. name + = "dynamic node data" + responseData [I]. id ;}} return responseData ;}View Code
3.7.3 code Summary
{ "data":  [ { "id": 1, "pId": 0, "name": "1 one" }, { "id": 11, "pId": 1, "name": "1.1 oneToOne" }, { "id": 12, "pId": 1, "name": "1.2 oneToTwo" }, { "id": 2, "pId": 0, "name": "2 two" } ]}Simulate background response data
<ul class="ztree"><ul></ul>HTML
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: 'pid '}, callback: {onClick: this. onCzT ReeOnClick}, async: {enable: true, url: "http: // localhost: 3000/data", type: "get", // autoParam: ["id ", "name = n", "level = lv"], // otherParam: {"otherParam": "zTreeAsyncTest"}, dataFilter: this. filter }}; // 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 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: Level 2 Heading'} //] getFont (treeId, node) {return node. font? Node. font: {};} filter (treeId, parentNode, responseData) {console. log (responseData); if (responseData) {for (var I = 0; I <responseData. length; I ++) {responseData [I]. name + = "dynamic node data" + responseData [I]. id ;}} return responseData;} onCzTreeOnClick (event, treeId, treeNode, clickFlag) {alert (treeNode. name);} constructor () {} ngOnInit () {console. log ('print output jquery object'); console. log ($); console. log ('but because the zTree object is output'); console. log ($. fn. zTree); // $. fn. zTree. init ($ ("# ztree"), this. setting, this. zNodes); $. fn. zTree. init ($ ("# ztree"), this. setting );}}TS
3.7.4 effect display

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More