angular2中使用ztree

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 }

ztree文档链接

http://www.treejs.cn/v3/api.php

猜你喜欢