EasyUI Form 表單不顯示：closed:true 導致 Dialog 隱藏、HTML 註釋破壞結構

使用 EasyUI 建立 Form 表單彈窗，頁面只顯示兩個按鈕，表單內容不見。主要原因：`data-options="closed:true"` 導致 Dialog 初始隱藏且無開啟觸發、HTML 註釋寫在標籤屬性中破壞 DOM 結構。本文給出修正代碼與最佳實踐。

錯誤代碼分析

<div id="userDialog" class="easyui-dialog" title="保存用戶" 
     data-options="iconCls:'icon-save',closed:true"  <!-- ❌ closed:true 預設隱藏 -->
     style="width: 300px; height: auto; padding: 20px" buttons="#btns">
    <!-- 表單內容 -->
</div>
<!-- 按鈕面板 -->
<div id="btns">
    <a id="btnSubmit" href="javascript:void(0)" class="easyui-linkbutton">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#userDialog').dialog('close')">取消</a>
</div>

<script>
$(function() {
    var userDialog = $("#userDialog");
    $("#add").click(function() {  // ❌ 頁面根本沒有 id="add" 的按鈕
        userDialog.dialog("open");
    });
});

修正後完整代碼

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>EasyUI Form 範例</title>
    <link rel="stylesheet" href="${ctx}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" href="${ctx}/easyui/themes/icon.css">
    <script src="${ctx}/easyui/jquery.min.js"></script>
    <script src="${ctx}/easyui/jquery.easyui.min.js"></script>
    <script src="${ctx}/easyui/locale/easyui-lang-zh_CN.js"></script>
</head>
<body>

<!-- 1. 開啟 Dialog 的觸發按鈕 -->
<button id="btnOpen" class="easyui-linkbutton" iconCls="icon-add">新增用戶</button>

<!-- 2. Dialog 定義：移除 closed:true，預設顯示；或保留 closed:true 但確保有開啟邏輯 -->
<div id="userDialog" class="easyui-dialog" title="保存用戶" 
     data-options="iconCls:'icon-save',closed:true,modal:true" 
     style="width: 300px; height: auto; padding: 20px" buttons="#btns">
    
    <form id="userForm" method="post" action="${ctx}/user_save">
        <table>
            <tr>
                <td>用戶名:</td>
                <td><input class="easyui-validatebox" type="text" name="username" data-options="required:true"></td>
            </tr>
            <tr>
                <td>郵箱:</td>
                <td><input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'"></td>
            </tr>
            <tr>
                <td>主題:</td>
                <td><input class="easyui-validatebox" type="text" name="subject" data-options="required:true,validType:'length[10,200]'"></td>
            </tr>
            <tr>
                <td>Message:</td>
                <td><textarea name="message" style="height: 60px;"></textarea></td>
            </tr>
        </table>
    </form>
</div>

<!-- 3. 底部按鈕面板 -->
<div id="btns">
    <a id="btnSubmit" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-save" onclick="submitForm()">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#userDialog').dialog('close')">取消</a>
</div>

<script>
$(function() {
    // 開啟 Dialog
    $('#btnOpen').click(function() {
        $('#userDialog').dialog('open').dialog('center');
    });

    // 表單提交
    function submitForm() {
        $('#userForm').form('submit', {
            onSubmit: function() {
                return $(this).form('validate');  // EasyUI 內建驗證
            },
            success: function(data) {
                var result = JSON.parse(data);
                if (result.success) {
                    $('#userDialog').dialog('close');
                    $.messager.alert('提示', '保存成功', 'info');
                } else {
                    $.messager.alert('錯誤', result.msg, 'error');
                }
            }
        });
    }
});
</script>
</body>
</html>

關鍵修正點

EasyUI Dialog 常用選項速查

data-options="
    title: '標題',
    iconCls: 'icon-save',
    width: 400,
    height: 300,
    closed: true,      // 初始隱藏
    modal: true,       // 模態遮罩
    resizable: true,   // 可調整大小
    minimizable: true, // 可最小化
    maximizable: true, // 可最大化
    collapsible: true, // 可摺疊
    onOpen: function() { console.log('opened'); },
    onClose: function() { console.log('closed'); }
"

遵循「Dialog 初始隱藏需有開啟入口、HTML 結構乾淨無註釋污染、表單用 `form('submit')` 驗證提交」三原則，即可讓 EasyUI Form 正常顯示並運作。