在Angular中如何整合zTree程式碼-js教程-PHP中文網

本篇文章主要介紹了Angular整合zTree的範例程式碼，現在分享給大家，也給大家做個參考。

1 前提準備

1.1 新建一個angular4專案

參考部落格文章：點選前往

##1.2 去zTree官網下載zTree

zTree官網：點擊前往

##2 程式設計步驟

#從列印出zTree物件可以看出，zTree物件利用init方法來實作zTree結構；init方法接收三個參數

參數1：一個ul標籤的DOM節點物件

參數2：基本配置物件

參數3：標題資訊陣列

2.1 在index.html中引入相關js、css

<!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 在TS檔案中宣告jquery物件

declare var $ : any;

登入後複製

2.3 在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 在元件HTML中編寫程式碼

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

登入後複製

2.5 效果展示

3 zTree基本功能

3.1 不顯示連接線

3.1.1 官方文件

不顯示標題之間的連接線

3.1.2 編程步驟

在基本設定物件中指定showLine屬性的值為false即可

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

登入後複製

3.2 不顯示節點圖示

3.2. 1 官方文件

去掉節點前面的圖示

#3.2.2 程式設計步驟

將基本設定物件的showIcon屬性設為false即可

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

登入後複製

3.3 自訂節點圖示

3.3.1 官方文件

更改節點的圖標

3.3.2 程式設計步驟

為treeNode節點資料設定icon/iconOpen/iconClose屬性即可

3.4 自訂字體

3.4.1 官方文件

更改節點字體的樣式

# #3.4.2 程式設計步驟

為treeNode節點資料設定font屬性即可，font屬性的值是一個對象，該對象的內容和style的資料一樣

3.4.3 效果展示

3.5 超連結

3.5.1 官方文件

#點選節點標題就會自動跳到對應的url

注意01：click屬性只能進行最簡單的click 事件操作。相當於 onclick="..." 的內容。如果操作較複雜，請使用 onClick 事件回呼函數。

3.5.2 程式設計步驟

#為treeNode節點資料設定url、click屬性即可

技巧01：設定click屬性時，屬性值必須是一些簡單的onClick事件

技巧02：設定target屬性時，屬性值有_blank 和_self

_blank -> 用一個新視窗開啟

_self -> 在原先的視窗開啟

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 點選控制

####### ###3.6.1 官方文件#########點擊節點標題時觸發對應的方法######技巧01：在angular中可以利用這個用法來實現路由跳轉#### ##############3.6.2 程式設計步驟######

设置基本配置对象的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中路径压缩图片上传尺寸获取的问题（详细教程）

以上是在Angular中如何整合zTree程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！