지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 본문

Angular는 zTree와 결합하여 노드 데이터 인스턴스 공유를 비동기식으로 로드합니다.

小云云
풀어 주다： 2018-01-24 10:04:16
원래의
2211명이 탐색했습니다.

이 글은 주로 zTree와 결합된 Angular를 사용하여 노드 데이터를 비동기적으로 로드하는 방법과 어려움을 공유합니다. 이와 관련하여 필요한 친구들이 참고할 수 있기를 바랍니다.

1 전제 조건

1.1 새 Angle4 프로젝트 만들기

1.2 zTree 공식 웹사이트로 이동하여 zTree

zTree 공식 웹사이트로 이동: 클릭하여

Sanshao에서 사용하는 버전: 클릭하여

로 이동

2 프로그래밍 단계

　

zTree 객체를 인쇄해 보면 알 수 있듯이 zTree 객체는 init 메소드를 사용하여 zTree 구조를 구현합니다. init 메소드는 세 개의 매개변수를 받습니다.

매개변수 1: DOM 노드 Ul Tag

Parameter 2 : 기본 구성 객체

Parameter 3 : 제목 정보 배열

2.1 인덱스에 관련 JS 및 CSS를 소개합니다. 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>
로그인 후 복사

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에 코드 작성


<ul 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
 }
 };
로그인 후 복사

view code

3.3에 설정하십시오.

3.3.2 프로그래밍 단계

아이콘 설정/ treeNode 노드 데이터 iconOpen /iconClose 속성을 사용할 수 있습니다

3.4 사용자 정의 글꼴

3.4.1 공식 문서

노드 글꼴 스타일 변경

3.4.2 프로그래밍 단계

treeNode 노드 데이터에 대한 글꼴 속성을 설정합니다. 글꼴 속성의 값은 개체이며 개체의 내용은 스타일의 데이터와 동일합니다

3.4.3 효과 표시

3.5 하이퍼링크

3.5.1 공식 문서

노드 제목을 클릭하면 자동으로 해당 URL로 이동합니다

참고 01: 클릭 속성은 가장 간단한 클릭 이벤트 작업만 수행할 수 있습니다. 에 해당하는 콘텐츠입니다. 작업이 더 복잡하다면 onClick 이벤트 콜백 함수를 사용하세요.

3.5.2 프로그래밍 단계

treeNode 노드 데이터에 대한 URL 및 클릭 속성을 설정하세요

팁 01: 클릭 속성을 설정할 때 속성 값은 간단한 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 공식 문서

노드 제목을 클릭하면 해당 메소드가 트리거됩니다

Tip 01: 이 사용법을 사용하여 각도에서 경로 점프를 구현할 수 있습니다

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 < responseData.length; i++) {
 // responseData[i].name += "动态节点数据" + responseData[i].id;
 // }
 // }
 // return responseData;
 // }
 onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
 alert(treeNode.name);
 } 
 constructor() { } 
 ngOnInit() { 
 console.log('打印输出jquery对象');
 console.log($);
 console.log('但因输出zTree对象');
 console.log($.fn.zTree);
 $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 // $.fn.zTree.init($("#ztree"),this.setting);
 }
}
로그인 후 복사

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 < responseData.length; i++) {
 responseData[i].name += "动态节点数据" + responseData[i].id;
 }
 }
 return responseData;
 }
로그인 후 복사

View Code

3.7.3 代码总汇



{
 "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"
 }
 ]
}
로그인 후 복사

模拟后台响应数据



<ul class="ztree"><ul></ul>
로그인 후 복사
로그인 후 복사

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 < responseData.length; i++) {
 responseData[i].name += "动态节点数据" + responseData[i].id;
 }
 }
 return responseData;
 }

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

 constructor() { }
 
 ngOnInit() { 
 console.log('打印输出jquery对象');
 console.log($);
 console.log('但因输出zTree对象');
 console.log($.fn.zTree);
 // $.fn.zTree.init($("#ztree"),this.setting,this.zNodes);
 $.fn.zTree.init($("#ztree"),this.setting);
 }
}
로그인 후 복사

TS

3.7.4 效果展示

相关推荐：

jquery easyui tree异步加载子节点详解

JavaScript文件的同步和异步加载的实现代码

zTree异步加载展开第一级节点方法实现

위 내용은 Angular는 zTree와 결합하여 노드 데이터 인스턴스 공유를 비동기식으로 로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
angular 加载
원천：php.cn
이전 기사：자바스크립트 배열 병합 방법이 자세히 설명되어 있습니다. 다음 기사：Angular2에 다른 플러그인을 통합하는 방법의 자세한 예
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Angular 7은 SCSS에서 중복 속성을 제거합니다. AngularSASS(.scss)는 속성을 제거합니다. 브라우저 간 호환성을 위해 중복 속성을 포함할 수 있도록 이런 일이 발생하지 않도록 하려면 어떻게 해야 합...
에서 2024-04-04 23:28:54
0
1
1382
Angular 애플리케이션에서 Javascript 프로토타입 생성자를 가져올 때 오류가 발생합니다. 생성자가 있는 JS 파일을 가져오려고 하는 Angular 애플리케이션이 있습니다. 하지만 애플리케이션을 실행하면 webpack에서 오류가 발생합니다. 자산의 Ja...
에서 2024-04-04 11:36:15
0
1
288
Ajax를 사용하여 콘텐츠 생성 - ID로 스크롤하면 작동하지 않습니다. Ajax를 통해 얻은 데이터를 기반으로 페이지 콘텐츠를 생성합니다. 내가 겪고 있는 문제는 특정 ID로 스크롤하려고 할 때 스크롤이 발생하지 않거나 잘못된 위치로...
에서 2024-04-04 09:29:39
0
1
397
Angular에서 원형 SVG 온도 드래거를 만드시겠습니까? 다음은 제가 Angular에서 만들려고 하는 원형 썸 드래거의 정적 데모입니다. rinkle-dashoffset="-260" 설정을 사용하여 엄...
에서 2024-04-03 09:33:29
0
1
376
Angular: 텍스트 요소 색상을 이해하기 위한 속성 바인딩에 반응성이 부족합니다. 다음은 내 .ts 파일입니다. import{Component}from'@angular/core';@Component({selector:'app-event-bind...
에서 2024-04-01 17:28:52
0
1
358
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿