recherche

Maison >interface Web >js tutoriel >Comment intégrer le code zTree dans Angular

Comment intégrer le code zTree dans Angular

亚连
亚连original
2018-06-09 17:20:272847parcourir

Cet article présente principalement l'exemple de code d'Angular intégrant zTree. Maintenant, je le partage avec vous et le donne comme référence.

1 Préparation des prérequis

1.1 Créer un nouveau projet angulaire4

Article de blog de référence : cliquez pour accéder à

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

Site officiel de zTree : 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 ; >

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 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>
2.2 Déclarer l'objet jquery dans le fichier TS

declare var $ : any;
2.3 Écrire le code dans le fichier TS

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);
 }
}
2.4 Ecriture du code dans le composant HTML 

<ul id="ztree" class="ztree"><ul></ul>
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 la valeur de l'attribut showLine comme false dans l'objet de configuration de base

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

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

Définissez l'attribut showIcon de l'objet de configuration de base sur false 

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

3.3 Personnalisation 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 les attributs icon/iconOpen/iconClose pour les données du nœud treeNode Can

3.4 Police personnalisée

. 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 de police pour le Données du nœud treeNode. La valeur de l'attribut font est un objet, le contenu de l'objet et les données de style Même

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 à l'url correspondante

Remarque 01 : L'attribut click ne peut effectuer que l'opération d'événement de clic la plus simple. Équivalent à onclick="...". 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

Conseils 01 : Lors de la définition de l'attribut de clic, 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 d'attribut incluent _blank et _self

_blank -> ; Utilisez-en un Ouvrir dans une nouvelle fenêtre

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

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

3.6 Cliquez sur le contrôle

3.6.1 Document officiel

Déclenchez la méthode correspondante lorsque vous cliquez sur le titre du nœud

Astuce 01 : Vous pouvez utiliser cette utilisation pour implémenter le saut d'itinéraire angulaire

3.6.2 Étapes de programmation

设置基本配置对象的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
  }
 };

编写onClick触发方法

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

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

相关文章：

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

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

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

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

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!

Déclaration：
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
Article précédent：outil d'empaquetage de nœuds Pkg (tutoriel détaillé)Article suivant：outil d'empaquetage de nœuds Pkg (tutoriel détaillé)

Articles Liés

Voir plus