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

infragistics log


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



延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言