Question

我正在使用Ag Grid Enterprise版本。我有以下要求。

1）我有3列。所有3列均为下拉字段。基于第一列中值的选择，我必须将特定行中的第二列和第三列设置为动态可编辑或不可编辑。

2）一个对象，其中包含网格中所有可见行的列表。即使我添加了新行，我也应该将该新行作为列表的一部分

有人可以让我知道如何实现吗？

Answer 1

关于您的第一个要求：每个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;
}

Answer 2

在这里，我考虑了一个具有两个下拉菜单选项和年份列的网格的情况。期权下拉列表包含值1,2和3以及1990-1995年的Year下拉年份。从“选项”下拉列表中选择值1时，将不允许您更改年份。

app.component.html

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

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

通过使 editable：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

更改选项值时，通过getValue（）将其传递给option-cell-renderer

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”属性的值会将其绑定到UI。

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”属性的值并将其绑定到UI。

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

Ag Grid +如何动态地使特定行中的特定列可编辑或不可编辑

2 个答案: