Infragistics｜Ignite UI for Angular｜我想通過 IgxGrid 單元控制可編輯/禁用

尚無瀏覽量

2023-08-06 更新

如果只想使特定單元格不可編輯，請將 igx-column 設置的 editable 設置為 true，在 IgxGridComponent 的 onCellEditEnter 中檢查是否滿足使其不可編輯的條件，並根據結果取消事件即可做。

例如，要僅當行 ID 值為“ABC”時禁用編輯，代碼如下。

<igx-grid #grid1 id=“grid1” [data]=“data1” [autoGenerate]=“false” [primaryKey]=“‘ID'”

  (onCellEditEnter)=“editStart($event)”>

  <igx-column [field]=“‘ID'” [header]=“‘ID'”></igx-column>

  <!– 列のeditableはtrueにしておく –>

  <igx-column [field]=“‘CompanyName'” [header]=“‘Company Name'” [editable]=“true”></igx-column>

  <igx-column [field]=“‘ContactName'” [header]=“‘Contact Name'” [editable]=“true”></igx-column>

…

</igx-grid>

  public editStart(event: IGridEditEventArgs){
    // 行IDが特定の値と合致するか判定し、合致する場合はevent.cancelにtrueを入れてキャンセルする。
    if(event.cellID.rowID == "ABC"){
      event.cancel = true;
    }
  }