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 或以下的單元格將具有紅色字體顏色。