import { Component } from '@angular/core';
import { DataService } from './data.service';
@Component({
selector: 'app-root',
template: `
<h2>Footer Rows</h2>
<eui-treegrid style="height:250px"
[data]="data" [footerData]="footerData" [showFooter]="true"
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;
footerData = null;
constructor(public dataService: DataService){}
ngOnInit() {
let d = this.dataService.getData();
this.data = d.rows;
this.footerData = d.footerRows;
}
}
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 {
"rows": [
{"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}
]}
],
"footerRows": [
{"region":"Total","f1":14000,"f2":12600,"f3":13321,"f4":15281,"f5":14931,"f6":13461,"f7":14126,"f8":12866}
]
};
}
}import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);