communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Angular se combine avec zTree pour charger de manière asynchrone le partage d'instances de données de nœud

Angular se combine avec zTree pour charger de manière asynchrone le partage d'instances de données de nœud

小云云
Libérer： 2018-01-24 10:04:16
original
2238 Les gens l'ont consulté

Cet article partage principalement avec vous les difficultés et les méthodes de chargement asynchrone des données de nœuds avec Angular combiné avec zTree. Les amis qui ont des besoins à cet égard peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1 Préparation des prérequis

1.1 Créer un nouveau projet angulaire4

1.2 Accédez au site officiel de zTree pour télécharger zTree

Site officiel de zTree : Cliquez pour accéder à

La version utilisée par Sanshao : Cliquez pour accéder à

2 étapes de programmation

　

Comme le montre l'impression de l'objet zTree, l'objet zTree utilise la méthode init pour implémenter la structure zTree ; la méthode init reçoit trois paramètres

Paramètre 1 : un objet nœud DOM avec une balise ul

paramètre 2 : objet de configuration de base

Paramètre 3 : tableau d'informations sur le titre

2.1 Introduire les js et css pertinents dans 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>
Copier après la connexion

Afficher le code

2.2 Déclarer l'objet jquery dans le fichier TS


declare var $ : any;
Copier après la connexion

2.3 Écrire le code dans le fichier TS


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.onCzTreeOnClick
 // }
 // };
 // zNodes = [
 // {id: 1, pId: 0, name: '1 一级标题', 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: '1.1 二级标题', open: true, font:{'background-color':'skyblue', 'color':'white'}},
 // {id: 111, pId: 11, name: '1.1.1 三级标题 -> 博客园', url: 'http://www.cnblogs.com/NeverCtrl-C/'},
 // {id: 112, pId: 11, name: '1.1.2 三级标题 -> 单击', click: "alert('你单击了')"},
 // {id: 12, pId: 1, name: '1.2 二级标题'},
 // {id: 2, pId: 0, name: '2 一级标题'}
 // ]
 // 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 一级标题'},
 {id: 11, pId: 1, name: '1.1 二级标题'},
 {id: 111, pId: 11, name: '1.1.1 三级标题'},
 {id: 112, pId: 11, name: '1.1.2 三级标题'},
 {id: 12, pId: 1, name: '1.2 二级标题'},
 {id: 2, pId: 0, name: '2 一级标题'}
 ];
 constructor() { }
 ngOnInit() { 
 console.log($);
 console.log($.fn.zTree);
 $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 }
}
Copier après la connexion

Afficher le code

2.4 Écriture du code dans le composant HTML


<ul class="ztree"><ul></ul>
Copier après la connexion
Copier après la connexion

2.5 Affichage des effets

3 fonctions de base de zTree

3.1 Ne pas afficher les lignes de connexion

3.1.1 Documentation officielle

Ne pas afficher les lignes de connexion entre les titres

3.1.2 Étapes de programmation

Spécifiez simplement la valeur de l'attribut showLine comme false dans l'objet de configuration de base 


 setting = {
 data: {
 simpleData: {
 enable: true
 }
 },
 view: {
 showLine: false
 }
 };
Copier après la connexion

3.2 Ne pas afficher les icônes de nœud

3.2.1 Document officiel

Supprimer l'icône devant le nœud

3.2.2 Étapes de programmation

Configurer l'objet de base Il suffit de définir l'attribut showIcon sur false



setting = {
 data: {
 simpleData: {
 enable: true
 }
 },
 view: {
 showLine: false,
 showIcon: false
 }
 };
Copier après la connexion

Afficher le code

3.3 Personnaliser l'icône du nœud

3.3.1 Document officiel

Changer l'icône du nœud

3.3.2 Étapes de programmation

Définissez simplement les attributs icon/iconOpen/iconClose pour les données du nœud treeNode

3.4 Personnalisé font

3.4.1 Document officiel

Changer le style de la police du nœud

3.4.2 Étapes de programmation

Définissez simplement l'attribut font pour les données du nœud treeNode. La valeur de l'attribut font est un objet, le contenu de cet objet est le même que les données de style

. 3.4.3 Affichage de l'effet

3.5 Lien hypertexte

3.5.1 Document officiel

Cliquer sur le titre du nœud passera automatiquement au correspondant url

Remarque 01 : L'attribut click ne peut effectuer que l'opération d'événement de clic la plus simple. contenu équivalent à . Si l'opération est plus complexe, utilisez la fonction de rappel d'événement onClick.

3.5.2 Étapes de programmation

Définissez les attributs d'url et de clic pour les données du nœud treeNode

Astuce 01 : lors de la définition du clic attribut , la valeur de l'attribut doit être un simple événement onClick

Astuce 02 : lors de la définition de l'attribut cible, les valeurs de l'attribut sont _blank et _self

_blank -> nouvelle fenêtre

_self -> Ouvrir dans la fenêtre d'origine 



 zNodes = [
 {id: 1, pId: 0, name: '1 一级标题', 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: '1.1 二级标题', open: true, font:{'background-color':'skyblue', 'color':'white'}},
 {id: 111, pId: 11, name: '1.1.1 三级标题 -> 博客园1', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_blank'},
 {id: 113, pId: 11, name: '1.1.1 三级标题 -> 博客园2', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_self'},
 {id: 112, pId: 11, name: '1.1.2 三级标题 -> 单击', click: "alert('你单击了')"},
 {id: 12, pId: 1, name: '1.2 二级标题'},
 {id: 2, pId: 0, name: '2 一级标题'}
 ]
Copier après la connexion

Afficher le code

3.6 Contrôle de clic

3.6.1 Document officiel

La méthode correspondante est déclenchée lorsque l'on clique sur le titre du nœud

Astuce 01 : Vous pouvez l'utiliser dans une utilisation angulaire pour implémenter un saut de routage

3.6.2 编程步骤

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

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



 setting = {
 view: {
 showLine: true,
 showIcon: true,
 fontCss: this.getFont
 },
 data: {
 simpleData: {
 enable: true,
 idKey: 'id',
 pIdKey: 'pId'
 }
 },
 callback: {
 onClick: this.onCzTreeOnClick
 }
 };
Copier après la connexion

View Code

编写onClick触发方法



 onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
 alert(treeNode.name);
 }
Copier après la connexion

View Code

3.6.3 代码汇总



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.onCzTreeOnClick
 },
 // 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 一级标题', 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: '1.1 二级标题', open: true, font:{'background-color':'skyblue', 'color':'white'}},
 {id: 111, pId: 11, name: '1.1.1 三级标题 -> 博客园1', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_blank'},
 {id: 113, pId: 11, name: '1.1.1 三级标题 -> 博客园2', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_self'},
 {id: 112, pId: 11, name: '1.1.2 三级标题 -> 单击', click: "alert('你单击了')"},
 {id: 12, pId: 1, name: '1.2 二级标题'},
 {id: 2, pId: 0, name: '2 一级标题'}
 ]
 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 += "动态节点数据" + responseData[i].id;
 // }
 // }
 // return responseData;
 // }
 onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
 alert(treeNode.name);
 } 
 constructor() { } 
 ngOnInit() { 
 console.log('打印输出jquery对象');
 console.log($);
 console.log('但因输出zTree对象');
 console.log($.fn.zTree);
 $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 // $.fn.zTree.init($("#ztree"),this.setting);
 }
}
Copier après la connexion

View Code

3.7 异步加载节点数据

3.7.1 官方文档

节点的数据是从后台进行获取的

3.7.2 编程步骤

技巧01：异步加载节点数据时init方法不用传递第三个参数

> 准备一个后台用于返回JSON格式的数据

技巧01：返回的JSON数据是一个列表，格式为


[
 {
 "id": 1,
 "pId": 0,
 "name": "1 one"
 },
 {
 "id": 2,
 "pId": 0,
 "name": "2 two"
 }
 ]
Copier après la connexion

技巧02：三少偷懒，是利用json-server模拟的后台数据，哈哈；json-server

> 设置基本配置对象的async属性



 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
 }
 };
Copier après la connexion

View Code

> 编写响应数据处理方法



 filter(treeId, parentNode,responseData) {
 console.log(responseData);
 if (responseData) {
 for(var i =0; i < responseData.length; i++) {
 responseData[i].name += "动态节点数据" + responseData[i].id;
 }
 }
 return responseData;
 }
Copier après la connexion

View Code

3.7.3 代码总汇



{
 "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"
 }
 ]
}
Copier après la connexion

模拟后台响应数据



<ul class="ztree"><ul></ul>
Copier après la connexion
Copier après la connexion

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.onCzTreeOnClick
 },
 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 一级标题', 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: '1.1 二级标题', open: true, font:{'background-color':'skyblue', 'color':'white'}},
 // {id: 111, pId: 11, name: '1.1.1 三级标题 -> 博客园1', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_blank'},
 // {id: 113, pId: 11, name: '1.1.1 三级标题 -> 博客园2', url: 'http://www.cnblogs.com/NeverCtrl-C/', target: '_self'},
 // {id: 112, pId: 11, name: '1.1.2 三级标题 -> 单击', click: "alert('你单击了')"},
 // {id: 12, pId: 1, name: '1.2 二级标题'},
 // {id: 2, pId: 0, name: '2 一级标题'}
 // ]

 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 += "动态节点数据" + responseData[i].id;
 }
 }
 return responseData;
 }

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

 constructor() { }
 
 ngOnInit() { 
 console.log('打印输出jquery对象');
 console.log($);
 console.log('但因输出zTree对象');
 console.log($.fn.zTree);
 // $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 $.fn.zTree.init($("#ztree"),this.setting);
 }
}
Copier après la connexion

TS

3.7.4 效果展示

相关推荐：

jquery easyui tree异步加载子节点详解

JavaScript文件的同步和异步加载的实现代码

zTree异步加载展开第一级节点方法实现

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées：
angular 加载
source：php.cn
Article précédent：La méthode d'aplatissement du tableau javascript est expliquée en détail Article suivant：Exemples détaillés de méthodes d'intégration d'autres plug-ins dans Angular2
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Angular 7 supprime les attributs en double dans SCSS AngularSASS (.scss) supprime les propriétés. Comment puis-je empêcher que cela se produise...
Depuis 2024-04-04 23:28:54
0
1
1382
Une erreur est générée lors de l'importation du constructeur de prototype Javascript dans une application angulaire J'ai une application Angular dans laquelle j'essaie d'importer un fichier JS doté d'un con...
Depuis 2024-04-04 11:36:15
0
1
288
Générer du contenu à l'aide d'Ajax - le défilement jusqu'à Id ne fonctionne pas Je génère du contenu de page basé sur des données obtenues via ajax. Le problème que j'ai ...
Depuis 2024-04-04 09:29:39
0
1
397
Créer un curseur de température SVG circulaire dans Angular ? Voici une démonstration statique d'un curseur de pouce circulaire que j'essaie de créer da...
Depuis 2024-04-03 09:33:29
0
1
376
Angulaire : la liaison de propriété pour comprendre la couleur des éléments de texte manque de réactivité Ce qui suit est mon fichier .ts, import{Component}from'@angular/core';@Component({selector...
Depuis 2024-04-01 17:28:52
0
1
358
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal