EasyUI DataGrid 根據狀態動態顯示圖片與背景色

在 EasyUI DataGrid 中，rowStyler 只能控制行內聯樣式（背景色、字體等），若需在特定欄位根據數據值顯示圖片（如星星評級），必須使用欄位的 formatter 函數。

實現步驟

1. 定義欄位時加入 formatter 屬性。
2. 函數接收 value（欄位值）、row（整行數據）、index（行索引）。
3. 根據 value 返回包含 <img> 標籤的 HTML 字串。

代碼範例：難度星星顯示

columns: [[
    { field: 'level', title: '等級', width: 80,
        formatter: function(value, row, index) {
            if (value > 30) return '<img src="3.png" />';
            if (value > 20) return '<img src="2.png" />';
            if (value > 10) return '<img src="1.png" />';
            return '';
        }
    }
]]

背景色與圖片結合

若同時需要行背景色與欄位圖片，rowStyler 處理整行樣式，formatter 處理特定欄位圖片，兩者互不干擾。

建議下載 EasyUI 中文 API 手冊，查閱 formatter、rowStyler、styler 等屬性的詳細用法。