jQuery EasyUI Datagrid 可編輯表格：失去焦點自動儲存並取消編輯狀態

需求：使用者點擊空白處或按 Enter 時，結束編輯並將修改值送回後端更新資料庫。

核心邏輯：`onBlur` / `onClickCell` 觸發 `endEdit` → 取得變更行 → AJAX 更新

$('#dg').datagrid({
    singleSelect: true,
    onClickCell: function(index, field) {
        if (editIndex != index) {
            if (endEditing()) {
                $('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);
                editIndex = index;
            } else {
                $('#dg').datagrid('selectRow', editIndex);
            }
        }
    },
    onBlur: function() { endEditing(); } // 點空白處失去焦點
});

var editIndex = undefined;
function endEditing() {
    if (editIndex == undefined) return true;
    var rows = $('#dg').datagrid('getRows');
    var row = rows[editIndex];
    // 1. 結束編輯模式
    $('#dg').datagrid('endEdit', editIndex);
    // 2. 取得編輯後的值 (已同步到 row 物件)
    var updatedRow = $('#dg').datagrid('getRows')[editIndex];
    // 3. AJAX 送後端更新
    $.ajax({
        url: '/api/updateRow',
        method: 'POST',
        data: updatedRow,
        success: function(r) {
            if (r.success) {
                $('#dg').datagrid('acceptChanges'); // 提交變更
            } else {
                $('#dg').datagrid('rejectChanges'); // 回滾
                $.messager.alert('失敗', r.msg);
            }
        }
    });
    editIndex = undefined;
    return true;
}

後端更新 API 範例 (Spring Boot)

@PostMapping("/api/updateRow")
public Map updateRow(@RequestBody RowDTO dto) {
    try {
        jdbcTemplate.update("UPDATE t SET col1=?, col2=? WHERE id=?", dto.getCol1(), dto.getCol2(), dto.getId());
        return Map.of("success", true);
    } catch (Exception e) {
        return Map.of("success", false, "msg", e.getMessage());
    }
}

進階技巧

• Enter 鍵提交：在 `editor` 定義加 `{type:'textbox', options:{onEnter:()=>endEditing()}}`。
• 批次更新：改用 `getChanges('edited')` 取得所有修改行，一次 AJAX 送陣列。
• 驗證：`editor` 選項加 `validType:['length[1,20]','remote[...]']`，前端先攔截。

核心模式：**`endEdit` 同步資料 → `acceptChanges` 確認 → AJAX 回寫失敗則 `rejectChanges` 回滾**，即可實現「點空白處自動存檔、取消編輯態」的流暢體驗。