Infragistics｜Ignite UI for Angular｜IgxGrid 有條件地將樣式應用於單元格

148 瀏覽人次

2023-09-03 更新

在 IgxGrid 中，可以使用列的cellClasses 屬性在特定條件下設置單元格的樣式。

應用於單元格的樣式

::ng-deep {   .short {     color: red;   } }

應用風格

如果IgxGrid的綁定數據有一個帶有classes元素的字段，則將cellTextClasses對象分配給IgxGrid相應列（IgxColumn）的cellClasses屬性。

 <igx-grid
       #grid1 

 
       [data]=“data”   

 
       [primaryKey]=“‘ID'”   

 
       [width]=“‘917px'”
       [height]=“‘334px'”   

 
       [displayDensity]=“‘compact'”>   

 
     <igx-column
       *ngFor=“let
       c of columns”   

 
       [field]=“c.field”   

 
       [header]=“c.headerText”   

…

 
       [cellClasses]
       = “c.classes
       ? cellTextClasses : null”>   

 
     </igx-column>   

 </igx-grid>   

  export class AppComponent implements OnInit {     title = 'igx-grid-cell-styles';     ...     cellTextClasses = {       short: (rowData, columnKey, cellValue, rowIndex) => {         return rowData[columnKey] < 20;       }     };        ngOnInit() {       // 列の定義       this.columns = [         { field: 'ID', headerText: 'ID', width: 100 },         { field: 'ProductName', headerText: '商品名', width: 200 },         { field: 'Supplier', headerText: '仕入れ先', width: 200 },         { field: 'UnitPrice', headerText: '単価', width: 200 },         { field: 'UnitsInStock', headerText: '在庫', width: 200, classes: this.cellTextClasses },       ];       // データ       ...     }   }

執行結果

“庫存”列中值為 20 或以下的單元格將具有紅色字體顏色。