欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Angular整合zTree的示例代碼

 更新時間:2018年01月24日 08:39:55   作者:NeverCtrl_C  
本篇文章主要介紹了Angular整合zTree的示例代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

1 前提準備

1.1 新建一個angular4項目

參考博文:點擊前往

1.2 去zTree官網(wǎng)下載zTree

zTree官網(wǎng): 點擊前往

2 編程步驟

從打印出zTree對象可以看出,zTree對象利用init方法來實現(xiàn)zTree結(jié)構(gòu);init方法接收三個參數(shù)

參數(shù)1:一個ul標簽的DOM節(jié)點對象

參數(shù)2:基本配置對象

參數(shù)3:標題信息數(shù)組

2.1 在index.html中引入相關(guān)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 不顯示節(jié)點圖標

3.2.1 官方文檔

去掉節(jié)點前面的圖標

3.2.2 編程步驟

將基本配置對象的showIcon屬性設為false即可

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

3.3 自定義節(jié)點圖標

3.3.1 官方文檔

更改節(jié)點的圖標

3.3.2 編程步驟

為treeNode節(jié)點數(shù)據(jù)設置icon/iconOpen/iconClose屬性即可

3.4 自定義字體

3.4.1 官方文檔

更改節(jié)點字體的樣式

3.4.2 編程步驟

為treeNode節(jié)點數(shù)據(jù)設置font屬性即可,font屬性的值是一個對象,該對象的內(nèi)容和style的數(shù)據(jù)一樣

3.4.3 效果展示

3.5 超鏈接

3.5.1 官方文檔

點擊節(jié)點標題就會自動跳轉(zhuǎn)到對應的url

注意01:click屬性只能進行最簡單的 click 事件操作。相當于 onclick="..." 的內(nèi)容。 如果操作較復雜,請使用 onClick 事件回調(diào)函數(shù)。

3.5.2 編程步驟

為treeNode節(jié)點數(shù)據(jù)設置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 官方文檔

點擊節(jié)點標題時觸發(fā)相應的方法

技巧01: 在angular中可以利用這個用法來實現(xiàn)路由跳轉(zhuǎn)

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觸發(fā)方法

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

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS中使用three.js的實例詳解

    AngularJS中使用three.js的實例詳解

    這篇文章主要介紹了AngularJS中使用three.js的實例詳解,我將之前自己做的demo放到了angularJS的一個component中,其實一開始是沒有準備用框架的但是后面發(fā)現(xiàn)需要進行的雙向綁定越來越多,后期表單數(shù)據(jù)的變化量也很大,最后還是選擇用NG來做這些事情
    2017-07-07
  • Angular本地存儲安全分析詳解

    Angular本地存儲安全分析詳解

    這篇文章主要為大家介紹了Angular本地存儲安全分析詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • Angular.js指令學習中一些重要屬性的用法教程

    Angular.js指令學習中一些重要屬性的用法教程

    這篇文章主要給大家介紹了關(guān)于Angular.js指令學習中一些重要屬性的用法教程,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-05-05
  • AngularJS 所有版本下載地址

    AngularJS 所有版本下載地址

    這篇文章主要介紹了 AngularJS 所有版本下載地址的相關(guān)資料,需要的朋友可以參考下
    2016-09-09
  • angularjs指令之綁定策略(@、=、&)

    angularjs指令之綁定策略(@、=、&)

    這篇文章主要介紹了angularjs指令之綁定策略(@、=、&),AngularJS提供了幾種方法能夠?qū)⒅噶顑?nèi)部的隔離作用域,同指令外部的作用域進行數(shù)據(jù)綁定。
    2017-04-04
  • 詳解Angular6 熱加載配置方案

    詳解Angular6 熱加載配置方案

    這篇文章主要介紹了詳解Angular6 熱加載配置方案,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • Angular使用cli生成自定義文件、組件的方法

    Angular使用cli生成自定義文件、組件的方法

    這篇文章主要介紹了Angular使用cli生成自定義文件、組件的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-09
  • Angular自定義組件實現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實例

    Angular自定義組件實現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實例

    下面小編就為大家分享一篇Angular自定義組件實現(xiàn)數(shù)據(jù)雙向數(shù)據(jù)綁定的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • angularjs中的單元測試實例

    angularjs中的單元測試實例

    這篇文章主要介紹了angularjs中的單元測試實例,本文主要說說利用karma和jasmine來進行ng模塊的單元測試,需要的朋友可以參考下
    2014-12-12
  • 如何通過簡單的代碼描述Angular父組件、子組件傳值

    如何通過簡單的代碼描述Angular父組件、子組件傳值

    Vue組件是學習Vue框架最比較難的部分,下面這篇文章主要給大家介紹了關(guān)于如何通過簡單的代碼描述Angular父組件、子組件傳值的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-04-04

最新評論