Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
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);