文章分類/

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

148 瀏覽人次
2023-09-03 更新

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

快速跳轉目錄

✦ 群昱 AccessSoft 你的全面軟體解決方案 ✦

身為全球眾多知名軟體在台灣合作夥伴,歡迎諮詢你需要的軟體服務!

Picture of 軟體專家
軟體專家

群昱作為全球知名軟體推薦合作夥伴,致力於提供更多軟體解決方案給你!

更多軟體新知

立即詢價

請留下完整資訊,以便我們提供精確的服務內容給你。

詢價資訊