jqGrid 內嵌新增表單欄位不顯示：Navigator 配置缺失

現象

jqGrid 導航列點擊「新增」按鈕，彈出的編輯對話框**空白無任何輸入欄位**；但「檢視記錄」卻能正常顯示欄位內容。

根本原因

jqGrid 的 **內嵌新增/編輯表單** 欄位定義**不自動從 `colModel` 繼承**，必須在 **`navGrid` 配置中明確指定 `edit`/`add` 參數**，或對每個欄位設定 `editable: true` 並配置 `editoptions`/`formoptions`。

解決方案：完整 navGrid 配置

$("#grid").jqGrid('navGrid', '#pager', 
    { view: true, edit: true, add: true, del: true, search: true }, // 按鈕顯示控制
    // 編輯對話框參數
    { 
        width: 400, 
        closeAfterEdit: true, 
        recreateForm: true, // 關鍵：每次重新建立表單，避免殘留狀態
        beforeShowForm: function(form) { /* 自訂邏輯 */ }
    },
    // 新增對話框參數 (最關鍵！)
    { 
        width: 400, 
        closeAfterAdd: true, 
        recreateForm: true, // 必須設 true，否則欄位可能不渲染
        beforeShowForm: function(form) { /* 自訂邏輯 */ }
    },
    // 刪除參數
    { 
        width: 300, 
        msg: "確定刪除?" 
    },
    // 搜尋參數
    { 
        multipleSearch: true 
    },
    // 檢視參數
    { 
        width: 400 
    }
);

欄位層級配置 (colModel 中)

colModel: [
    { name: 'id', index: 'id', editable: false, hidden: true }, // 主鍵通常不可編輯
    { name: 'name', index: 'name', editable: true, editrules: { required: true }, formoptions: { label: '姓名' } },
    { name: 'email', index: 'email', editable: true, editrules: { email: true }, editoptions: { size: 30 } },
    { name: 'status', index: 'status', editable: true, edittype: 'select', editoptions: { value: '1:啟用;0:停用' }, formoptions: { label: '狀態' } }
    // ...
]

關鍵屬性：

• `editable: true`：允許在表單中編輯。
• `edittype`：'text' (預設)、'select'、'checkbox'、'textarea'、'custom'。
• `editoptions`：控制輸入框屬性 (size, maxlength, dataInit 等)、select 選項。
• `editrules`：驗證規則 (required, email, number, minValue, maxValue, custom_func)。
• `formoptions`：表單標籤、行列位置 (elmprefix, elmsuffix, rowpos, colpos)。

常見遺漏導致空白

1. 未在 `navGrid` 的 `add` 參數中設定 `recreateForm: true` — jqGrid 某版本預設複用表單 DOM，導致欄位不重新渲染。
2. `colModel` 中缺少 `editable: true`** — 欄位預設不可編輯。
3. 未引入 `jqGrid` 相關 CSS/JS** — 如 `ui.jqgrid.css`、`grid.locale-xx.js`、`jquery.jqGrid.min.js`。
4. 版本不匹配** — jqGrid 4.x/5.x API 差異大，參考對應版本文檔。