import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: ` <h2>TreeGrid Template</h2> <eui-treegrid style="height:250px" [data]="data" [footerData]="footerData" [showFooter]="true" idField="id" treeField="name"> <eui-grid-column field="name" title="Name" width="30%"> <ng-template euiFooterTemplate let-row> <span class="tree-file icon-sum"></span> {{row.name}} </ng-template> </eui-grid-column> <eui-grid-column field="persons" title="Persons" align="right"></eui-grid-column> <eui-grid-column field="begin" title="Begin Date"></eui-grid-column> <eui-grid-column field="end" title="End Date"></eui-grid-column> <eui-grid-column field="progress" title="Progress"> <ng-template euiCellTemplate let-row> <div class="progress"> <div class="progress-inner" [style.width.%]="row.progress"> {{row.progress}} % </div> </div> </ng-template> </eui-grid-column> </eui-treegrid> `, styles: [` .progress{ width: 100%; height: 20px; border: 1px solid #ccc; } .progress-inner{ height: 100%; background: red; color: #fff; padding: 0 4px; } `], providers: [DataService] }) export class AppComponent { data = null; footerData = null; constructor(public dataService: DataService){} ngOnInit() { this.data = this.dataService.getData(); this.footerData = { name: 'Total Persons:', persons: this.sum(this.data) }; } sum(data) { let persons = 0; for(let row of data){ persons += row.persons || 0; if (row.children){ persons += this.sum(row.children); } } return persons; } }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { Injectable } from '@angular/core'; @Injectable() export class DataService { getData() { return [ {"id":1,"name":"All Tasks","begin":"3/4/2017","end":"3/20/2017","progress":60,"iconCls":"icon-ok", "children":[ {"id":2,"name":"Designing","begin":"3/4/2017","end":"3/10/2017","progress":100,"state":"closed", "children":[ {"id":21,"name":"Database","persons":23,"begin":"3/4/2017","end":"3/6/2017","progress":100}, {"id":22,"name":"UML","persons":12,"begin":"3/7/2017","end":"3/8/2017","progress":100}, {"id":23,"name":"Export Document","persons":13,"begin":"3/9/2017","end":"3/10/2017","progress":100}, ] }, {"id":3,"name":"Coding","persons":21,"begin":"3/11/2017","end":"3/18/2017","progress":80}, {"id":4,"name":"Testing","persons":18,"begin":"3/19/2017","end":"3/20/2017","progress":20} ] } ] } }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);