EasyUI 动态选项卡内容(Dynamic Tab Content)

选项卡 Tabs

源代码

import { Component } from '@angular/core';
import { Dy1Component } from './dy1.component';
import { Dy2Component } from './dy2.component';

@Component({
  selector: 'app-root',
  template: `
    <h2>Dynamic Tab Content</h2>
    <eui-linkbutton (click)="addDataGrid(tt)">AddDataGrid</eui-linkbutton>
    <eui-linkbutton (click)="addNewTab()">AddNewTab</eui-linkbutton>
    <eui-tabs #tt style="height:250px"
        [selectedIndex]="selectedIndex"
        (tabClose)="onTabClose($event)"
        (tabSelect)="selectedIndex=tt.getPanelIndex($event)">
      <eui-tab-panel [title]="'Home'" iconCls="icon-ok">
        <p>The home tab.</p>
      </eui-tab-panel>
      <eui-tab-panel *ngFor="let tab of tabs" [title]="tab.title" [closable]="true" bodyCls="f-column">
        <tab-detail [component]="tab.component" class="f-full f-column"></tab-detail>
      </eui-tab-panel>
    </eui-tabs>
  `
})
export class AppComponent {
  selectedIndex = 0;
  tabs = [];

  onTabClose(panel){
    this.tabs = this.tabs.filter(p => p.title != panel.title);
  }

  getTabIndex(title){
    for(let i=0; i<this.tabs.length; i++){
      if (this.tabs[i].title == title){
        return i;
      }
    }
    return -1;
  }

  addTab(tab){
    let index = this.getTabIndex(tab.title);
    if (index == -1){
      this.tabs.push(tab);
      setTimeout(() => this.selectedIndex = this.tabs.length);
    } else {
      this.selectedIndex = index+1;
    }
  }

  addDataGrid(tt) {
    let tab = {title:'DataGrid',component:Dy1Component};
    this.addTab(tab);
  }

  addNewTab() {
    let tab = {title:'NewTab',component:Dy2Component};
    this.addTab(tab);
  }
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { EasyUIModule } from 'easyui/easyui/easyui.module';

import { AppComponent } from './app.component';
import { TabDetailComponent } from './tab-detail.component';
import { TabDirective } from './tab.directive';
import { Dy1Component } from './dy1.component';
import { Dy2Component } from './dy2.component';

@NgModule({
  declarations: [
    AppComponent,
    TabDetailComponent,
    TabDirective,
    Dy1Component,
    Dy2Component
  ],
  imports: [
    BrowserModule,
    FormsModule,
    EasyUIModule
  ],
  entryComponents: [ Dy1Component,Dy2Component ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import 'rxjs/add/observable/of';

@Injectable()
export class DataService {

	getColumns(): any {
		return Observable.of([
			{field:'inv',title:'Inv NO'},
			{field:'name',title:'Name'},
			{field:'amount',title:'Amount'},
			{field:'price',title:'Price'},
			{field:'cost',title:'Cost'},
			{field:'note',title:'Note'}
		]);
	}

	getData(): any {
		let total = 10000;
		let data = [];
		for(let i=1; i<=total; i++){
			let amount = Math.floor(Math.random()*1000);
			let price = Math.floor(Math.random()*1000);
			data.push({
				inv: 'Inv No '+i,
				name: 'Name '+i,
				amount: amount,
				price: price,
				cost: amount*price,
				note: 'Note '+i
			});
		}
		return Observable.of({
			total: total,
			rows: data
		});
	}
}

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

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);