jQuery EasyUI Combogrid 數據顯示完整指南

常見問題

Combogrid 下拉框無數據，通常是 columns 配置與返回 JSON 字段不匹配，或 url 路徑錯誤。

標準實現步驟

1. HTML 結構

<input id="cg" style="width:250px">

2. JS 初始化

$('#cg').combogrid({
    panelWidth: 500,
    idField: 'itemid',
    textField: 'productname',
    url: '/api/products',  // 返回 JSON: {total: 10, rows: [...]}
    columns: [[
        {field: 'itemid', title: 'ID', width: 80},
        {field: 'productname', title: '產品名', width: 120},
        {field: 'price', title: '價格', width: 80, align: 'right'}
    ]],
    fitColumns: true
});

3. 後端返回格式

{
  "total": 2,
  "rows": [
    {"itemid": "1", "productname": "筆記本", "price": 5999},
    {"itemid": "2", "productname": "鼠標", "price": 199}
  ]
}

進階技巧

• 本地數據模式：data: [...] 替代 url，適合靜態字典。
• 多列顯示：columns 可定義多行表頭、凍結列、formatter 渲染。
• 鍵盤導航：設置 navigation: true 支持上下鍵選擇。
• 聯動篩選：監聽 onChange 重新載入另一 Combogrid 的 url。

調試清單

1. F12 Network 確認請求發出且返回 200。
2. Response JSON 結構是否含 total/rows。
3. idField/textField 是否存在於 rows 對象中。
4. Console 是否有 JS 錯誤（如缺少 easyui.css）。