EasyUI DataGrid 編輯彈窗：點擊修改按鈕正確賦值行數據到 Dialog 表單

問題現象

使用 EasyUI DataGrid 時，點擊「修改」按鈕彈出 Dialog，需要將當前選中行的數據填充到彈窗表單中。但實際運行發現：數據無法正確賦值，尤其是日期類字段（`Birthday`）報錯或顯示異常。

核心問題分析

原代碼中關鍵錯誤行：

// ❌ 錯誤：row.Birthday 不是 EasyUI datebox 對象，無法調用 .datebox('getValue')
$('#txtBirthday').val(row.Birthday.datebox('getValue'));

錯誤原因

1. row 是 DataGrid 返回的純 JSON 數據對象，row.Birthday 是字符串或 Date 類型的原始數據值
2. .datebox('getValue') 是 jQuery EasyUI 插件方法，只能調用在已初始化的 datebox DOM 元素上
3. 混淆了「數據對象屬性」與「UI 組件實例」

正確賦值邏輯

1. 字符串/數字/下拉框直接賦值

if (row) {
    $("#txtLoginId").val(row.LoginId);
    $("#txtLoginPwd").val(row.LoginPwd);
    $("#txtUserStateId").val(row.UserStateId);
    $("#txtTeacherName").val(row.TeacherName);
    $('#txtSex').val(row.Sex);  // 假設是下拉框或文本框
}

2. 日期字段正確處理

// ✅ 正確：直接設置值，EasyUI datebox 會自動解析
$('#txtBirthday').val(row.Birthday);

// 如果後端返回格式不標準，需統一格式化
// 例如後端返回 "/Date(1234567890000)/" 或 "2023-01-15T00:00:00"
$('#txtBirthday').datebox('setValue', formatDate(row.Birthday));

// 通用日期格式化函數
function formatDate(dateVal) {
    if (!dateVal) return '';
    const date = new Date(dateVal);
    if (isNaN(date.getTime())) return dateVal; // 已是字符串格式
    return date.getFullYear() + '-' + 
           String(date.getMonth() + 1).padStart(2, '0') + '-' + 
           String(date.getDate()).padStart(2, '0');
}

3. 完整修改按鈕事件處理

{
    text: '修改',
    iconCls: 'icon-edit',
    handler: function () {
        var row = $('#tab').datagrid('getSelected');
        if (!row) {
            $.messager.alert("系統提示", "請選擇您要修改的數據！");
            return;
        }
        
        // 1. 重置表單（重要：避免殘留數據）
        $('#editForm').form('clear');
        
        // 2. 加載數據到表單（EasyUI 推薦方式）
        $('#editForm').form('load', row);
        // form('load') 會自動匹配 name 屬性與 row 鍵名
        
        // 3. 特殊字段單獨處理（如日期）
        if (row.Birthday) {
            $('#txtBirthday').datebox('setValue', formatDate(row.Birthday));
        }
        
        // 4. 打開對話框
        $("#divadd").dialog({
            title: '修改教師信息',
            width: 350,
            height: 380,
            closed: false,
            cache: false,
            modal: true,
            buttons: [{
                text: '保存',
                iconCls: 'icon-save',
                handler: function () {
                    // 表單驗證
                    if (!$('#editForm').form('validate')) return;
                    
                    // 獲取表單數據
                    var formData = $('#editForm').serialize();
                    formData += '&TeacherId=' + row.TeacherId;
                    
                    $.ajax({
                        type: "POST",
                        url: "Handler.ashx?type=2",
                        data: formData,  // 使用 serialize() 自動編碼
                        success: function (data) {
                            if (data === "ok") {
                                $.messager.alert("系統提示", "數據修改成功！");
                                $('#tab').datagrid('reload'); // 刷新列表
                                $('#divadd').dialog('close');
                            } else {
                                $.messager.alert("系統提示", "數據修改失敗：" + data);
                            }
                        },
                        error: function() {
                            $.messager.alert("錯誤", "請求異常，請檢查網絡");
                        }
                    });
                }
            }, {
                text: '關閉',
                iconCls: 'icon-cancel',
                handler: function () {
                    $('#divadd').dialog('close');
                }
            }]
        });
    }
}

4. HTML 表單結構（關鍵：name 屬性必須與數據鍵名一致）

<div id="divadd" style="display:none;">
    <form id="editForm" method="post" novalidate>
        <input type="hidden" name="TeacherId" />
        
        <table>
            <tr>
                <td>登錄賬號:</td>
                <td><input name="LoginId" id="txtLoginId" class="easyui-textbox" required></td>
            </tr>
            <tr>
                <td>密碼:</td>
                <td><input name="LoginPwd" id="txtLoginPwd" class="easyui-textbox" type="password"></td>
            </tr>
            <tr>
                <td>姓名:</td>
                <td><input name="TeacherName" id="txtTeacherName" class="easyui-textbox" required></td>
            </tr>
            <tr>
                <td>性別:</td>
                <td>
                    <select name="Sex" id="txtSex" class="easyui-combobox">
                        <option value="男">男</option>
                        <option value="女">女</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>生日:</td>
                <td><input name="Birthday" id="txtBirthday" class="easyui-datebox" data-options="formatter:myFormatter,parser:myParser"></td>
            </tr>
        </table>
    </form>
</div>

5. DateBox 格式化器（確保顯示/解析一致）

function myFormatter(date) {
    if (!date) return '';
    var y = date.getFullYear();
    var m = (date.getMonth() + 1).toString().padStart(2, '0');
    var d = date.getDate().toString().padStart(2, '0');
    return y + '-' + m + '-' + d;
}

function myParser(s) {
    if (!s) return new Date();
    var ss = s.split('-');
    var y = parseInt(ss[0], 10);
    var m = parseInt(ss[1], 10);
    var d = parseInt(ss[2], 10);
    if (!isNaN(y) && !isNaN(m) && !isNaN(d)) {
        return new Date(y, m - 1, d);
    } else {
        return new Date();
    }
}

關鍵最佳實踐總結

總結

EasyUI DataGrid 編輯彈窗的核心要點：

1. 使用 $('#form').form('load', row) 實現數據自動映射（要求表單 `name` 與數據 `key` 一致）
2. 日期字段使用 datebox('setValue', value) 而非直接 `.val()`
3. 表單提交使用 serialize() 避免手動拼接參數錯誤
4. 保存成功後調用 datagrid('reload') 刷新列表，而非重新查詢

遵循 EasyUI 的數據綁定約定，能減少 80% 的手動賦值代碼和 Bug。