文章分類／Infragistics
讓我們根據igGrid中的欄位的值更改整行的顏色。完成後結果如下圖所示。
兩種方法如下:
方法1：使用 columns 的 template 新增在 CSS 的 Class 裡。
方法2：在 rowsRendered 事件中新增 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事件處理:
... $("#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