我们可以在进行内联编辑时延迟加载下拉列表的数据吗？

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

可以定义函数到return数组数据。

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

让列：ColDef = { headerName：'Lookup'，字段：'FieldName'，coldId：'Id' cellEditorFramework: DropdownEditorComponent, 细胞编辑器参数：{ 获取选项：（）＝｛ return this.opts; ｛ } }

导出class 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
}

}

我们可以在进行内联编辑时延迟加载下拉列表的数据吗？

Can we lazy load data for dropdown while doing inline edit?

javascript

ag-grid

ag-grid-ng2