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>Dialog Editing</h2>
		<eui-linkbutton (click)="onAddRow()" iconCls="icon-add" style="margin-bottom:10px">Add New</eui-linkbutton>
		<eui-datagrid [data]="data" style="height1:250px">
			<eui-grid-column field="itemid" title="Item ID"></eui-grid-column>
			<eui-grid-column field="name" title="Name"></eui-grid-column>
			<eui-grid-column field="listprice" title="List Price" align="right"></eui-grid-column>
			<eui-grid-column field="unitcost" title="Unit Cost" align="right"></eui-grid-column>
			<eui-grid-column field="attr" title="Attribute" width="30%"></eui-grid-column>
			<eui-grid-column title="Commands" align="center" width="100">
				<ng-template euiCellTemplate let-row>
					<eui-linkbutton btnCls="c5" (click)="onEditRow(row)">Edit</eui-linkbutton>
					<eui-linkbutton btnCls="c1" (click)="onDeleteRow(row)">Delete</eui-linkbutton>
				</ng-template>
			</eui-grid-column>
		</eui-datagrid>
		<eui-edit-form [closed]="closed" [isNewRow]="isNewRow" [row]="editingRow" (save)="onSaveRow($event)" (cancel)="closed=true">
		</eui-edit-form>
	`,
	providers: [DataService]
})
export class AppComponent {
	data = null;
	isNewRow = false;
	editingRow = null;
	closed = true;

	constructor(public dataService: DataService){}
	
	ngOnInit() {
		this.data = this.dataService.getData();
		this.initRow();
	}

	initRow() {
		this.editingRow = {
			itemid: null,
			name: null,
			listprice: null,
			unitcost: null,
			addr: null,
		};		
	}

	onAddRow(){
		this.initRow();
		this.isNewRow = true;
		this.closed = false;
	}

	onEditRow(row){
		this.isNewRow = false;
		this.editingRow = row;
		this.closed = false;
	}

	onSaveRow(row){
		if (this.isNewRow){
			this.dataService.add(row);
		} else {
			this.dataService.update(row);
		}
		this.data = this.dataService.getData();
		this.closed = true;
		this.isNewRow = false;
	}

	onDeleteRow(row){
		this.dataService.delete(row);
		this.data = this.dataService.getData();
	}
}
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Validators, FormGroup, FormBuilder, FormControl } from '@angular/forms';
 
@Component({
    selector: 'eui-edit-form',
    template: `
        <eui-dialog [closed]="closed" [draggable]="true" [modal]="true" [title]="isNewRow ? 'Add' : 'Edit'">
            <form novalidate [formGroup]="formGroup" style="padding:20px 40px">
                <div style="margin-bottom:20px">
                    <label [for]="name">Item ID:</label>
                    <eui-textbox #itemid formControlName="itemid" [invalid]="formGroup.get('itemid').invalid" style="width:200px"></eui-textbox>
                    <div class="error" *ngIf="formGroup.get('itemid').hasError('required')">This field is required.</div>
                </div>
                <div style="margin-bottom:20px">
                    <label [for]="name">Name:</label>
                    <eui-textbox #name formControlName="name" [invalid]="formGroup.get('name').invalid" style="width:200px"></eui-textbox>
                    <div class="error" *ngIf="formGroup.get('name').hasError('required')">This field is required.</div>
                </div>
                <div style="margin-bottom:20px">
                    <label [for]="listprice">List Price:</label>
                    <eui-numberbox #listprice formControlName="listprice" precision="1" style="width:200px"></eui-numberbox>
                </div>
                <div style="margin-bottom:20px">
                    <label [for]="unitcost">Unit Price:</label>
                    <eui-numberbox #unitcost formControlName="unitcost" style="width:200px"></eui-numberbox>
                </div>
                <div style="margin-bottom:20px">
                    <label [for]="attr">Attribute:</label>
                    <eui-textbox #attr formControlName="attr" style="width:200px"></eui-textbox>
                </div>
            </form>
            <div class="dialog-button">
                <eui-linkbutton (click)="onSave()" style="width:80px">Save</eui-linkbutton>
                <eui-linkbutton (click)="onCancel()" style="width:80px">Cancel</eui-linkbutton>
            </div>
        </eui-dialog>
    `,
    styles: [`
        .error{
            color: red;
            font-size: 12px;
            margin: 4px 0 4px 80px;
        }
    `]
})
export class EditFormComponent{
    @Input() closed = true;
 
    _row: any;
 
    @Input()
    get row(){
        return this._row;
    }
    set row(value: any){
        this._row = value;
        this.formGroup.reset(this._row);
    }
 
    @Input() isNewRow = false;
 
    @Output() save = new EventEmitter();
    @Output() cancel = new EventEmitter();
 
    formGroup: FormGroup;
 
    constructor(fb: FormBuilder){
        this.formGroup = fb.group({
            'itemid': [null, Validators.required],
            'name': [null, Validators.required],
            'listprice': null,
            'unitcost': null,
            'attr': null
        });
    }
 
    onSave(){
        if (this.formGroup.valid){
            Object.assign(this.row, this.formGroup.value);
            this.save.emit(this.row);
        }
        
    }
 
    onCancel(){
        this.cancel.emit();
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { EasyUIModule } from 'easyui/easyui/easyui.module';

import { EditFormComponent } from './edit-form.component';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    EditFormComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpModule,
    EasyUIModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
	data = [
		{"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
		{"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-10"},
		{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-11"},
		{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-12"},
		{"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-13"},
		{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-14"},
		{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-15"},
		{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-16"},
		{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-17"},
		{"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-18"}
	];

	getData() {
		return this.data;
	}

	delete(item: any){
		this.data = this.data.filter(row => row != item);
	}

	add(row: any){
		this.data = this.data.concat([row]);
	}

	update(row: any){
		this.data = this.data.map(r => {
			if (r == row){
				return row;
			} else {
				return r;
			}
		});
	}

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

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);