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