文章分類/

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

349 瀏覽人次
2023-02-15 更新

infragistics log

讓我們根據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事件處理:

  1. 取得被指定行列的集合(如下面程式碼段落中的第13行,以此類推)
  2. 藉由關聯的元素從各行取出被綁定的資料(第22到28行)
  3. 判斷庫存數是否小於20(第33行)
  4. 向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

快速跳轉目錄

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

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

Picture of 軟體專家
軟體專家

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

更多軟體新知

立即詢價

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

詢價資訊