import { Component } from '@angular/core'; import { DataService } from './data.service'; @Component({ selector: 'app-root', template: ` <h2>Multiple ComboTreeGrid</h2> <eui-combotreegrid style="width:300px" placeholder="Select a row" valueField="id" textField="name" [(ngModel)]="value" [data]="data" [multiple]="true" [panelStyle]="{width:'500px'}" [textFormatter]="formatText"> <eui-treegrid> <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> </eui-combotreegrid> <p *ngIf="value">You selected: {{value}}</p> `, providers: [DataService] }) export class AppComponent { value = [21]; data = null; constructor(public dataService: DataService){} ngOnInit(){ this.data = this.dataService.getData(); } formatText(value: string){ if (this.value && this.value.length > 3){ return this.value.length + ' rows selected'; } return value; } }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 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, BrowserAnimationsModule, 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);