Выбрать со значениями и идентификаторами внутри ячейки ag-grid? - PullRequest
Новая
       91

Выбрать со значениями и идентификаторами внутри ячейки ag-grid?

1 голос
/ 07 марта 2019

Я очень новичок в ag-grid и оцениваю его.

Данные моего проекта имеют несколько таблиц поиска (т. Е. У Foo есть категория Bar, Brand of Baz и Class of Boo), которыеЯ хотел бы иметь возможность редактировать в ag-grid.К сожалению, эти таблицы поиска не находятся под моим контролем, и у меня не всегда есть последовательные идентификаторы.

Пример:

У Foo есть класс

Класс может быть одним из следующих:

  • ID - значение
  • 2 - тест
  • 3 - UAT
  • 6 - неизвестно
  • 9 - производство
  • 15 - Разработка

Я не могу контролировать идентификаторы или значения.

Так что, если я вставлю agSelectCellEditor, могу ли я как-то сказать ему, чтобы отображалсязначения, но собирать идентификаторы?

Кто-то еще получил лучшее представление о том, как я могу получить класс, марку и т. д.?

ETA:

От агgrid site (https://www.ag -grid.com / javascript-grid-cell-edit / # agselectcelleditor-agpopupselectcelleditor ): 

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

Это то, что я пробовал, но яне могу получить идентификаторы обратно.Может быть, у кого-то есть идея получше или она реализовала это раньше.

Спасибо за помощь noob ag-grid.

1 Ответ

2 голосов
/ 07 марта 2019

Вы можете сделать это, создав пользовательский редактор ячеек.

Компонент:

drop.down.editor.ts 

import {AfterViewInit, Component, ViewChild, ViewContainerRef} from "@angular/core";

import {ICellEditorAngularComp} from "ag-grid-angular";

@Component({
    selector: 'dropdown-cell-editor',
    templateUrl: "drop.down.editor.html"
})
export class DropDownEditor implements ICellEditorAngularComp, AfterViewInit {
    private params: any;
    public value: number;
    private options: any;

    @ViewChild('input', {read: ViewContainerRef}) public input;


    agInit(params: any): void {
        this.params = params;
        this.value = this.params.value;
        this.options = params.options;

    }

    getValue(): any {
        return this.value;
    }

    ngAfterViewInit() {
        window.setTimeout(() => {
            this.input.element.nativeElement.focus();
        })
    }

}

drop.down.editor.html 

 <select  #input  [(ngModel)]="value">
   <option *ngFor="let item of options" value="{{item.value}}">{{item.name}}</option>
  </select>

, затем добавьте объявление модуля 

@NgModule({
  imports:      [ ... , AgGridModule.withComponents( [DropDownEditor]) ],
  declarations: [ ..., DropDownEditor ]
})

, затем используйте его в определении столбца 

{
    headerName: "Drop down",
    field: "dropdown",
    cellEditorFramework: DropDownEditor,
    editable: true,
    cellEditorParams: {
        options: [{
                name: "First Option",
                value: 1
            },
            {
                name: "Second Option",
                value: 2
            }
        ]
    }
}

Полный пример здесь

...