Web Demo Mobile Demo Angular Demo Vue Demo React Demo

树形表格下拉框 ComboTreeGrid

源代码
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);