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

156 瀏覽人次

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