Ag Grid + Как сделать определенный столбец из определенной строки редактируемым или не редактируемым динамически

Question

Я использую версию Ag Grid Enterprise. У меня ниже требования.

1) У меня есть 3 столбца. Все 3 столбца являются выпадающими полями. Основываясь на выборе значения в первом столбце, мне нужно сделать второй и третий столбец в определенной строке для динамического редактирования или нередактируемого.

2) Объект, который содержит список всех видимых строк в сетке. Даже если я добавлю новую строку, я должен получить эту новую строку как часть списка

Может кто-нибудь, пожалуйста, дайте мне знать, как мне этого добиться?

Answer 1

Здесь я рассмотрел сценарий с сеткой с двумя столбцами Option и Year, которые являются выпадающими.Раскрывающийся список опций содержит значения 1,2 и 3 и годы раскрывающегося года с 1990-1995 гг.Если в раскрывающемся списке «Опция» выбрано значение 1, это не позволит вам изменить год.

app.component.html

<div style="text-align:center">
  ag-grid Example
</div>
<app-grid></app-grid>

.component.html

<ag-grid-angular #agGrid style="width: 100%; height: 500px;" class="ag-theme-balham" [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)">
</ag-grid-angular>

grid.component.cs

Определения столбцов сетки задаются путем изменения значения : true и для каждого определения столбца отдельные компоненты связываются как редактор ячеек и средство визуализации ячеек.

import { Component, OnInit } from '@angular/core';
import { GridOptions } from 'ag-grid-community';
import { OptionsCellRendererComponent } from './options-cell-renderer/options-cell-renderer.component';
import { OptionsCellEditorComponent } from './options-cell-editor/options-cell-editor.component';
import { YearCellRendererComponent } from './year-cell-renderer/year-cell-renderer.component';
import { YearCellEditorComponent } from './year-cell-editor/year-cell-editor.component';

@Component({
  selector: 'app-grid',
  templateUrl: './grid.component.html'
})
export class GridComponent implements OnInit {
  gridOptions: GridOptions;

  constructor() { }

  ngOnInit() {
    this.gridOptions = {
    } as GridOptions;
  }

  onGridReady(params) {
    this.setData();
  }

  setData() {
    this.gridOptions.api.setColumnDefs(this.getColumnDefinitions());
    this.gridOptions.api.setRowData(this.getData());
  }

  getColumnDefinitions(): any {
    return [
      {
        field: 'option',
        headerName: 'Option',
        cellRendererFramework: OptionsCellRendererComponent,
        cellEditorFramework: OptionsCellEditorComponent,
        editable: true,
        singleClickEdit: true,
      },
      {
        field: 'year',
        headerName: 'Year',
        cellRendererFramework: YearCellRendererComponent,
        cellEditorFramework: YearCellEditorComponent,
        editable: true,
        singleClickEdit: true,
      },
    ]
  }

  getData(): any {
    return [
      {
        option: '1',
        year: 1990
      },
      {
        option: '2',
        year: 1991
      }
    ];
  }

}

options-cell-editor.component.html

Редактор ячееккомпонент для столбца Option с раскрывающимся списком значений 1,2,3

<div>
  <select style="height: 20px; width: 180px;" [(ngModel)]="selectedOption">
    <option value=1> 1</option>
    <option value=2> 2</option>
    <option value=3> 3</option>
  </select>
</div>

options-cell-editor.component.ts

при изменении значения параметра,передать его в option-cell-renderer через getValue ()

import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-options-cell-editor',
  templateUrl: './options-cell-editor.component.html',
  styleUrls: ['./options-cell-editor.component.css']
})
export class OptionsCellEditorComponent implements ICellEditorAngularComp {
  selectedOption = 0;

  getValue(): number {
    return this.selectedOption;
  }

  isPopup?(): boolean {
    return true;
  }

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

options-cell-renderer.component.html

Показать значение опции

<div>{{option}}</div>

options-cell-renderer.component.ts

params.value передаст привязку значения к этому столбцу из строк строки таблицы.В этом случае значение свойства 'option' и привязка его к пользовательскому интерфейсу.

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-options-cell-renderer',
  templateUrl: './options-cell-renderer.component.html',
  styleUrls: ['./options-cell-renderer.component.css']
})
export class OptionsCellRendererComponent implements ICellRendererAngularComp {
  public params: any;
  option: string;

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

  refresh(): boolean {
    return false;
  }

  constructor() { }    
}

year-cell-editor.component.html

Редактор ячееккомпонент для столбца Год с выпадающим списком лет 1990-1995

<div>
  <select style="height: 20px; width: 180px;" [(ngModel)]="selectedYear">
    <option value="1990">1990</option>
    <option value="1991">1991</option>
    <option value="1992">1992</option>
    <option value="1993">1993</option>
    <option value="1994">1994</option>
    <option value="1995">1995</option>
  </select>
</div>

year-cell-editor.component.ts

пользователю разрешено изменять год, есливыбранная опция не 1. Это обрабатывается методом isCancelBeforeStart.

import { Component } from '@angular/core';
import { ICellEditorAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-year-cell-editor',
  templateUrl: './year-cell-editor.component.html',
  styleUrls: ['./year-cell-editor.component.css']
})
export class YearCellEditorComponent implements ICellEditorAngularComp {
  selectedYear: number;
  params: any;

  constructor() { }

  getValue() {
    return this.selectedYear;
  }

  isPopup?(): boolean {
    return false;
  }

  isCancelBeforeStart?(): boolean {
    return this.params.data.option === '1';
  }

  agInit(params): void {
    this.params = params;
    this.selectedYear = params.value;
  }
}

year-cell-renderer.component.html

Показать значение выбранного года

<div>{{year}}</div>

year-cell-renderer.component.ts

params.value передаст привязку значения к этому столбцу из строк строки таблицы.В этом случае значение свойства 'year' и привязка его к пользовательскому интерфейсу.

import { Component } from '@angular/core';
import { ICellRendererAngularComp } from 'ag-grid-angular';

@Component({
  selector: 'app-year-cell-renderer',
  templateUrl: './year-cell-renderer.component.html',
  styleUrls: ['./year-cell-renderer.component.css']
})
export class YearCellRendererComponent implements ICellRendererAngularComp {
  year: number;

  constructor() { }

  refresh(params: any): boolean {
    return false;
  }

  agInit(params): void {
    this.year = params.value;
  }

}

app.module.ts

Регистрация пользовательских ячеек сетки для сетки

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AgGridModule } from 'ag-grid-angular';

import { AppComponent } from './app.component';
import { GridComponent } from './grid/grid.component';
import { OptionsCellEditorComponent } from './grid/options-cell-editor/options-cell-editor.component';
import { OptionsCellRendererComponent } from './grid/options-cell-renderer/options-cell-renderer.component';
import { YearCellEditorComponent } from './grid/year-cell-editor/year-cell-editor.component';
import { YearCellRendererComponent } from './grid/year-cell-renderer/year-cell-renderer.component';

@NgModule({
  declarations: [
    AppComponent,
    GridComponent,
    OptionsCellRendererComponent,
    OptionsCellEditorComponent,
    YearCellEditorComponent,
    YearCellRendererComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    CommonModule,
    AgGridModule.withComponents([
      OptionsCellEditorComponent,
      OptionsCellRendererComponent,
      YearCellEditorComponent,
      YearCellRendererComponent
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

Относительно вашего первого требования: у каждого colDef есть свойство colDef.editable, которое может быть логическим или, в вашем случае, функцией обратного вызова:

colDef.editable = function(params) {
   // params contains the following properties:
   // params.node
   // params.column
   // params.colDef

   return true; // apply your criteria based on params;
}