Infragistics｜Ultimate UI IgniteUI｜根據 igGrid 欄位的「值」更改整行的顏色

尚無瀏覽量

#WPF

2023-02-15 更新

讓我們根據igGrid中的欄位的值更改整行的顏色。完成後結果如下圖所示。

兩種方法如下:

方法1：使用 columns 的 template 新增在 CSS 的 Class 裡。

方法2：在 rowsRendered 事件中新增 CSS 的 Class 裡。

方法1：使用 columns 的 template 新增在 CSS 的 Class 裡。

使用 template engine 判斷庫存數是否小於20，如果小於20，則在 TD 中新增 CSS，將背景顏色改為粉紅色。

設置 template engine 之處就是在 columns 的 template 選項裡。

在下面的程式碼的段落中，第12、16和20行就是執行的部分。


...
$("#grid1").igGrid({
    ...
    columns: [
        {
            headerText: "製品ID", key: "ProductId", dataType: "number",
            template: "${ProductId}"
        },
        {
            headerText: "製品名", key: "ProductName", dataType: "string",
            template: "${ProductName}"
        },
        {
            headerText: "在庫数", key: "StockedAmount", dataType: "number",
            template: "${StockedAmount}"
        },
    ],
    ...
});

方法1的範例: KB1445_ConditionalRowStyling1

方法1的參考來源:

template engine概要

https://igniteui.com/help/igtemplating-overview

columns的template選項

https://jp.igniteui.com/help/api/2019.1/ui.iggrid#options:columns.template

方法2：在rowsRendered事件中新增CSS的Class裡

說明執行下列程式時發生的rowsRendered事件處理:

取得被指定行列的集合（如下面程式碼段落中的第13行，以此類推）
藉由關聯的元素從各行取出被綁定的資料（第22到28行）
判斷庫存數是否小於20（第33行）
向TD新增CSS，如果小於20（第35行），則背景顏色改為粉紅色。


...
$("#grid1").igGrid({
    ...
    // rowsRenderedイベントのイベントハンドラー
    rowsRendered: function(evt, ui){

        // 將要 render 的 TR 要素取出來
        var rowTrs = ui.owner.rows();

        // forloop 每個 tr
        $.each(rowTrs, function (index, item) {

            // 檢查 item 存在與否
            if(item !== undefined && item !== null){

                
                var elementInfo = ui.owner.getElementInfo(item);

                
                if(elementInfo !== undefined && elementInfo !== null){

                    
                    var record = ui.owner.findRecordByKey(elementInfo.rowId);

                    
                    if(record !== undefined && record !== null){
                        // 「StockedAmount」如果未滿 20
                        if (record.StockedAmount < 20) {
                            
                            $(item).find("td").addClass("myStyle");
                        }
                    }
                }
            }
        });
    }
    ...
})

方法2的範例: KB1445_ConditionalRowStyling2

方法2的參考來源:

rowsRendered事件

https://jp.igniteui.com/help/api/2019.1/ui.iggrid#events:rowsRendered

getElementInfo方法

https://jp.igniteui.com/help/api/2019.1/ui.iggrid#methods:getElementInfo

findRecordByKey方法

https://jp.igniteui.com/help/api/2019.1/ui.iggrid#methods:findRecordByKey