Angular と zTree を組み合わせて、ノード データ インスタンス共有を非同期でロードします

この記事では主に、Angular と zTree を組み合わせてノード データを非同期にロードする際の困難さと方法について説明します。この点でニーズがある友人が参考になれば幸いです。

1 前提条件

1.1 新しい angular4 プロジェクトを作成します

1.2 zTree 公式 Web サイトに移動して zTree をダウンロードします

zTree 公式 Web サイト: クリックして

に移動します Sanshao で使用されているバージョン: クリックして

に移動します

2 プログラミング手順

zTree オブジェクトの出力からわかるように、zTree オブジェクトは init メソッドを使用して zTree 構造を実装します。init メソッドは 3 つのパラメーターを受け取ります

パラメーター 1: DOM ノードulタグが付いたオブジェクト

パラメータ2: 基本設定オブジェクト

パラメータ3: タイトル情報配列

2.1 Index.htmlに関連するjsとcssを導入

nbsp;html>


 <meta>
 <title>TestZtree</title>
 <base>

 <meta>
 <link>

 <link>
 <link>
 <script></script>
 <script></script>


 <app-root></app-root>

View Code

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 にコードを記述する

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

viewコード3.3に設定します。ノードアイコン3.3.3をカスタマイズします。

3.3.2 プログラミング手順

treeNodeノードデータのアイコン/アイコンを設定

3.4 カスタムフォント

3.4.1 公式ドキュメント

ノードフォントのスタイルを変更

3.4.2 プログラミング手順

treeNodeノードデータのフォント属性を設定します。フォント属性の値はオブジェクトであり、オブジェクトの内容はstyle

3.4.3のデータと同じです。エフェクト表示

3.5 ハイパーリンク

3.5.1 公式ドキュメント

ノードタイトルをクリックすると、対応するURLに自動的にジャンプします

注01: click属性は最も単純なクリックイベント操作のみを実行できます。に相当する内容。 操作がより複雑な場合は、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
 }
 };

View Code

编写onClick触发方法

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

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 
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"
 }
 ]
技巧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
 }
 };
View Code
> 编写响应数据处理方法


 filter(treeId, parentNode,responseData) {
 console.log(responseData);
 if (responseData) {
 for(var i =0; i <p>View Code</p><p>3.7.3 代码总汇</p><p class="cnblogs_code"><br></p><p class="cnblogs_code_hide"><br></p><pre class="brush:php;toolbar:false">{
 "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"
 }
 ]
}
模拟后台响应数据

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 
TS
3.7.4 效果展示
相关推荐：
jquery easyui tree异步加载子节点详解
JavaScript文件的同步和异步加载的实现代码
zTree异步加载展开第一级节点方法实现

以上がAngular と zTree を組み合わせて、ノード データ インスタンス共有を非同期でロードしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。