首頁 > 開發者 > JavaScript

Angular整合zTree的範例程式碼，angularztree

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

Angular整合zTree的範例程式碼，angularztree

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 '@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); }}

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: '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 一級標題'} ]

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: 'id',    pIdKey: 'pId'   }  },  callback: {   onClick: this.onCzTreeOnClick  } };

編寫onClick觸發方法

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

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