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>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);