EasyUI DataGrid Combobox 顯示值與編輯值類型不一致解決方案

問題背景

在 EasyUI DataGrid 中，某列需顯示民族名稱（文字），但編輯時需傳遞民族 ID（數字）。資料庫存儲的是 ID，直接綁定會導致顯示 ID 而非名稱；若後端直接返回名稱，則編輯時無法獲取 ID。Combobox 配置如下：

editor: {
    type: 'combobox',
    options: {
        required: true,
        url: '/handler/dict.ashx?flag=tree&t=Nation',
        parentField: 'pid',
        textFiled: 'text',
        valueField: 'id',
        method: 'get',
        lines: true,
        editable: false,
        panelHeight: 130,
        panelMaxWidth: 200
    }
}

解決方案

1. 預載資料至全域變數：使用 <script> 標籤載入後端資料，生成全域陣列 arrMZ，避免每次編輯發起 AJAX 請求。

   <script src="/handler/dict.ashx?flag=tree&t=Nation"></script>
   // 後端需輸出: var arrMZ=[{}...];
   

2. Combobox 使用本地資料：將 editor 的 url 改為 data: arrMZ。

   editor: {
       type: 'combobox',
       options: {
           required: true,
           parentField: 'pid',
           data: arrMZ,  // 直接使用本地資料
           valueField: 'id',
           textField: 'text'
       }
   }
   

3. 配置 Formatter 顯示文字：在欄位定義中添加 formatter 函數，根據 value 查找 arrMZ 返回對應文字。

   formatter: function(v) {
       for (var i = 0; i < arrMZ.length; i++) {
           if (arrMZ[i]['id'] == v) return arrMZ[i]['text'];
       }
       return v;
   }
   

優勢

• 減少網路請求，提升編輯響應速度。
• 清晰分離顯示邏輯（Formatter）與編輯資料源（Combobox data）。
• 符合「顯示文字、提交 ID」的常見業務需求。