EasyUI DataGrid：後端 Java 預先標記勾選狀態的實作技巧

使用 EasyUI DataGrid 時，常見需求是根據資料庫欄位值，決定某列的核取方塊（checkbox）是否預設勾選。最佳做法是在後端 Java 組裝資料時，直接在實體類別中加入標記欄位，前端據此渲染，避免前端複雜邏輯判斷。

後端實體類別設計

public class GridRowData {
    private String id;
    private String name;
    // 其他業務欄位...
    
    // 新增：給 EasyUI checkbox 用的標記欄位
    private boolean checked;  // 或 int checked; 1/0
    
    // getter/setter 略
}

Service/DAO 查詢時賦值

List<GridRowData> list = dao.queryList(params);
for (GridRowData row : list) {
    // 根據業務邏輯判斷，例如某狀態欄位為 'Y' 才勾選
    row.setChecked("Y".equals(row.getStatus()));
}
return list;

前端 EasyUI DataGrid 設定

<table id="dg" title="資料列表" class="easyui-datagrid" 
    data-options="
        singleSelect: true,
        checkbox: true,
        columns: [[
            {field:'ck', checkbox:true},  // 自動讀取 row.checked
            {field:'id', title:'ID', width:80},
            {field:'name', title:'名稱', width:120}
        ]]
    ">
</table>

EasyUI 會自動尋找資料物件中的 checked 屬性（布林或 1/0），若為 true/1 則渲染為勾選狀態。

進階：動態載入時的處理

若使用 loadData 或 reload 方法載入 JSON 資料，確保回傳的 JSON 物件包含 checked 欄位即可，無需額外 JS 邏輯。

優點總結

• 前後端分工清晰：後端負責業務判斷，前端只負責顯示。
• 效能佳：避免前端遍歷 DOM 或行資料做二次判斷。
• 擴充性強：未來需增加「禁用勾選」等邏輯，只需在後端加欄位（如 disabled），前端配合 formatter 即可。

此模式適用於所有需根據後端狀態控制 UI 狀態的 EasyUI 元件（如 Tree、ComboGrid 等）。