import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: ` <h2>Column Group</h2> <eui-treegrid style="height:250px" [data]="data" idField="id" treeField="region"> <eui-grid-column-group> <eui-grid-header-row> <eui-grid-column field="region" title="Region" rowspan="2" width="25%"></eui-grid-column> <eui-grid-column title="2017" colspan="4"></eui-grid-column> <eui-grid-column title="2018" colspan="4"></eui-grid-column> </eui-grid-header-row> <eui-grid-header-row> <eui-grid-column field="f1" title="1st qrt." align="right"></eui-grid-column> <eui-grid-column field="f2" title="2st qrt." align="right"></eui-grid-column> <eui-grid-column field="f3" title="3st qrt." align="right"></eui-grid-column> <eui-grid-column field="f4" title="4st qrt." align="right"></eui-grid-column> <eui-grid-column field="f5" title="1st qrt." align="right"></eui-grid-column> <eui-grid-column field="f6" title="2st qrt." align="right"></eui-grid-column> <eui-grid-column field="f7" title="3st qrt." align="right"></eui-grid-column> <eui-grid-column field="f8" title="4st qrt." align="right"></eui-grid-column> </eui-grid-header-row> </eui-grid-column-group> </eui-treegrid> `, providers: [DataService] }) export class AppComponent { data = null; constructor(public dataService: DataService){} ngOnInit() { this.data = this.dataService.getData(); } }
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,"region":"Wyoming","children":[ {"id":11,"region":"Albin","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838}, {"id":12,"region":"Canon","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838}, {"id":13,"region":"Egbert","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838} ]}, {"id":2,"region":"Washington","children":[ {"id":21,"region":"Bellingham","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838}, {"id":22,"region":"Chehalis","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838}, {"id":23,"region":"Ellensburg","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838}, {"id":24,"region":"Monroe","f1":2000,"f2":1800,"f3":1903,"f4":2183,"f5":2133,"f6":1923,"f7":2018,"f8":1838} ]} ]; } }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);