EasyUI Combobox 動態加載數據並固定默認選項的最佳實踐

場景痛點

使用 EasyUI combobox 從數據庫動態加載下拉數據時，往往需要在列表頂部固定一個「請選擇」或「全部」等默認選項，且該選項不隨數據變化而消失。

核心方案：loadFilter 過濾器

EasyUI 內置的 loadFilter 選項允許在數據綁定前攔截並重組數據源，這是實現該需求最優雅、最官方的方式。

完整代碼示例

<input class="easyui-combobox" 
       id="language" 
       name="language" 
       data-options="
           valueField: 'id',
           textField: 'text',
           loadFilter: function(data) {
               // 返回新數組：默認項 + 原始數據
               return [{id: 0, text: '--- 請選擇 ---'}].concat(data);
           }
       ">

關鍵點解析

• concat 方法：創建新數組，不污染原始數據源。
• id 為 0：便於後端判斷用戶是否真正選擇了具體項目。
• 無需修改後端接口：純前端處理，降低耦合度。

進階技巧：默認選中第一項

若希望頁面加載完成後自動選中默認項，可添加 onLoadSuccess 回調：

onLoadSuccess: function() {
    $(this).combobox('setValue', 0);
}

總結

利用 loadFilter 實現「動態數據+固定默認項」屬於 EasyUI 開發的標準模式，代碼量極少、維護性強，推薦在所有類似場景中采用。