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
    }
}

在进行内联编辑时，我们是否可以延迟加载下拉数据？

1 个答案: