1.引用jquery(第9行)
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>JztInsight</title> 6 <base href="/"> 7 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 <script src="assets/jquery.min.js"></script> 10 <link rel="icon" type="image/x-icon" href="favicon.ico"> 11 </head> 12 <body> 13 <app-root></app-root> 14 </body> 15 </html>
2.在需要用jquery的ts文件中加入
declare var $: any;
3.npm下载ztree包
npm install ztree --save
4.angular的angular-cli.json文件中加入依赖文件
1 { 2 "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 "project": { 4 "name": "jzt-insight-front" 5 }, 6 "apps": [ 7 { 8 "root": "src", 9 "outDir": "dist", 10 "assets": [ 11 "assets", 12 "favicon.ico" 13 ], 14 "index": "index.html", 15 "main": "main.ts", 16 "polyfills": "polyfills.ts", 17 "test": "test.ts", 18 "tsconfig": "tsconfig.app.json", 19 "testTsconfig": "tsconfig.spec.json", 20 "prefix": "app", 21 "styles": [ 22 "styles.css", 23 "../node_modules/ztree/css/zTreeStyle/zTreeStyle.css" 24 ], 25 "scripts": [ 26 "../node_modules/ztree/js/jquery.ztree.core.min.js", 27 "../node_modules/ztree/js/jquery.ztree.exhide.min.js" 28 ], 29 "environmentSource": "environments/environment.ts", 30 "environments": { 31 "dev": "environments/environment.ts", 32 "prod": "environments/environment.prod.ts" 33 } 34 } 35 ], 36 "e2e": { 37 "protractor": { 38 "config": "./protractor.conf.js" 39 } 40 }, 41 "lint": [ 42 { 43 "project": "src/tsconfig.app.json", 44 "exclude": "**/node_modules/**" 45 }, 46 { 47 "project": "src/tsconfig.spec.json", 48 "exclude": "**/node_modules/**" 49 }, 50 { 51 "project": "e2e/tsconfig.e2e.json", 52 "exclude": "**/node_modules/**" 53 } 54 ], 55 "test": { 56 "karma": { 57 "config": "./karma.conf.js" 58 } 59 }, 60 "defaults": { 61 "styleExt": "css", 62 "component": {} 63 } 64 }
5.html页面
1 <ul id="treeDemo" class="ztree"></ul>
6.ts文件中
1 import { Component, OnInit } from '@angular/core'; 2 import { FormBuilder, FormGroup, FormControl,Validators } from '@angular/forms'; 3 import { HttpService } from "../../../service/http.service"; 4 import 'ztree'; 5 declare var $: any; 6 7 const serverUrl2 = 'http://10.40.170.111:8012/'; 8 9 10 11 12 @Component({ 13 selector: 'kpi-model-view', 14 templateUrl: 'kpiCreate.component.html', 15 styleUrls: [ 16 '../../common/common.scss', 17 '../modelMain.scss' 18 ] 19 }) 20 21 export class kpiCreateComponent implements OnInit { 22 23 24 zNodes = []; 25 26 //tree属性配置 27 setting = { 28 check: { 29 enable: true, 30 chkStyle: "checkbox", 31 chkboxType: { "Y": "p", "N": "s" } 32 }, 33 data: { 34 key: { 35 name: "name" 36 }, 37 simpleData: { 38 enable: true, 39 idKey: "id", 40 pIdKey: "pId", 41 rootPId: 0 42 } 43 }, 44 view: { 45 showIcon: false 46 }, 47 callback: { 48 //onClick: this.zTreeOnClick, 49 onDblClick: this.zTreeOnDblClick 50 } 51 }; 52 53 54 //测试打印数据 55 _console(value) { 56 console.log(value); 57 } 58 59 ngOnInit() { 60 61 this.zNodes = [ 62 {"id":1, "pId":0, "ename":"MOT1"}, 63 {"id":2, "pId":0, "ename":"MOT2"}, 64 {"id":3, "pId":0, "ename":"MOT3"}, 65 {"id":4, "pId":0, "ename":"MOT4"}, 66 {"id":11, "pId":1, "ename":"PO_1"}, 67 {"id":12, "pId":1, "ename":"PO_2"}, 68 {"id":13, "pId":1, "ename":"PO_3"}, 69 {"id":14, "pId":1, "ename":"PO_4"}, 70 {"id":111, "pId":11, "ename":"Count_1"}, 71 {"id":112, "pId":11, "ename":"Count_2"}, 72 {"id":113, "pId":11, "ename":"Count_3"}, 73 {"id":114, "pId":11, "ename":"Count_4"}, 74 ]; 75 76 this.zNodes.forEach(data =>{ 77 // let countID = data._id.toString().substr(data._id.length-3,data._id.length); 78 // let poCountID = 'C'+data.poid.toString()+countID; 79 // data.countid = poCountID; 80 data.name = data.ename + 'S'; 81 82 }); 83 84 $.fn.zTree.init($("#treeDemo"),this.setting,this.zNodes); 85 } 86 87 88 //点击tree节点回调函数 89 zTreeOnClick(event, treeId, treeNode) { 90 alert(treeNode.tId + ", " + treeNode.ename); 91 }; 92 zTreeOnDblClick(event, treeId, treeNode) { 93 //alert(treeNode ? treeNode.tId + ", " + treeNode.ename : "isRoot"); 94 if(treeNode){ 95 this.count += treeNode.ename; 96 } 97 }; 98 99 100 101 102 constructor(private formbuilder: FormBuilder, 103 private httpService: HttpService 104 ) { } 105 106 107 }
7.
ztree文档链接
http://www.treejs.cn/v3/api.php