我們可以在進行內聯編輯時延遲加載下拉數據嗎？

Question

我正在使用ag-grid開發內聯編輯功能。

根據官方文檔：ag-Grid Cell Editing ，我們可以提供下拉選項值，同時提供列定義colDef本身。

colDef.cellEditor = 'selectCellEditor';
colDef.cellEditorParams = {
    values: ['English', 'Spanish', 'French', 'Portuguese', '(other)']
}

從服務器獲取這些值時該怎么辦？ 即我們可以延遲加載然后為下拉菜單提供cellEditorParams值嗎？ （我沒遇到過）

任何解決方案甚至方向都將不勝感激。

Answer 1

您可以創建以下拉列表為模板的自定義編輯器組件，並進行 HTTP 調用以加載下拉列表的數據。
即，在為列創建ColDef時，

let column: ColDef = {
        headerName: 'Lookup', field: 'FieldName', coldId: 'Id'
        cellEditorFramework: DropdownEditorComponent,
        cellEditorParams: {} // whatever data you want to have in editor component
}

在編輯器組件中，

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { ICellEditorAngularComp } from 'ag-grid-angular';
import * as _ from 'underscore';
// import HttpService

@Component({
    template: `
    <select [(ngModel)]="selectedValue" (change)="selectionChanged()" #dropdown>
        <option *ngFor="let item of items" [ngValue]="item">{{item.label}}</option>
    </select>
    `
})

組件定義：

export class DropdownEditorComponent implements ICellEditorAngularComp, AfterViewInit {

    private params: any;
    private items: any[];
    private selectedValue: any;
    private selectControl: ElementRef;

    @ViewChild('dropdown') dropdown: ElementRef;

    constructor(private http: HttpService) {
        this.items = [];
    }        
    ngAfterViewInit() {
        this.selectControl = this.dropdown;
    }

    agInit(params: any): void {
        if(this.items.length == 0) {
            this.params = params;
            this.http.post(url, params)
            // this.http.get(url) // if the call is a GET
                .subscribe(result => {
                    this.items = result;
                    this.selectedValue = _.find(this.items, item => item.label == params.value);
                });
        }
    }

    getValue(): any {
        return this.selectedValue.label;
    }
    isPopup(): boolean {
        return false;
    }
    setValue(value: any): any {
        this.selectedValue = value;
    }
    selectionChanged(): void {
        // whatever you want to do
    }
}

Answer 2

可以定義一個函數來返回數組數據。

this.opts = ['English', 'Spanish', 'French', 'Portuguese', '(other)'];

let column: ColDef = { headerName: 'Lookup', field: 'FieldName', coldId: 'Id' cellEditorFramework: DropdownEditorComponent, cellEditorParams: { getOptions:（）＝｛ return this.opts; ｝ } }

導出類 DropdownEditorComponent 實現 ICellEditorAngularComp、AfterViewInit {

private params: any;
private items: any[];
private selectedValue: any;
private selectControl: ElementRef;

@ViewChild('dropdown') dropdown: ElementRef;

constructor() {
    this.items = [];
}        
ngAfterViewInit() {
    this.selectControl = this.dropdown;
}

agInit(params: any): void {
    this.items = params.getOptions();
}

getValue(): any {
    return this.selectedValue.label;
}
isPopup(): boolean {
    return false;
}
setValue(value: any): any {
    this.selectedValue = value;
}
selectionChanged(): void {
    // whatever you want to do
}

}