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>Basic TreeGrid</h2>
		<eui-treegrid style="height:250px"
				[data]="data" idField="id" treeField="name">
			<eui-grid-column field="name" title="Name"></eui-grid-column>
			<eui-grid-column field="size" title="Size"></eui-grid-column>
			<eui-grid-column field="date" title="Date"></eui-grid-column>
		</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,
			"name":"C",
			"size":"",
			"date":"02/19/2010",
			"children":[{
				"id":2,
				"name":"Program Files",
				"size":"120 MB",
				"date":"03/20/2010",
				"children":[{
					"id":21,
					"name":"Java",
					"size":"",
					"date":"01/13/2010",
					"state":"closed",
					"children":[{
						"id":211,
						"name":"java.exe",
						"size":"142 KB",
						"date":"01/13/2010"
					},{
						"id":212,
						"name":"jawt.dll",
						"size":"5 KB",
						"date":"01/13/2010"
					}]
				},{
					"id":22,
					"name":"MySQL",
					"size":"",
					"date":"01/13/2010",
					"state":"closed",
					"children":[{
						"id":221,
						"name":"my.ini",
						"size":"10 KB",
						"date":"02/26/2009"
					},{
						"id":222,
						"name":"my-huge.ini",
						"size":"5 KB",
						"date":"02/26/2009"
					},{
						"id":223,
						"name":"my-large.ini",
						"size":"5 KB",
						"date":"02/26/2009"
					}]
				}]
			},{
				"id":3,
				"name":"eclipse",
				"size":"",
				"date":"01/20/2010",
				"children":[{
					"id":31,
					"name":"eclipse.exe",
					"size":"56 KB",
					"date":"05/19/2009"
				},{
					"id":32,
					"name":"eclipse.ini",
					"size":"1 KB",
					"date":"04/20/2010"
				},{
					"id":33,
					"name":"notice.html",
					"size":"7 KB",
					"date":"03/17/2005"
				}]
			}]
		}];

	}

}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);