Java 中將年份陣列動態綁定至 EasyUI Combobox 下拉選單

在 Java Web 開發中，常需將後端生成的年份列表傳遞給前端 EasyUI Combobox。核心在於 Controller 將 List 或 String[] 序列化為 JSON，前端通過 data 屬性或 loadFilter 載入。

後端準備數據（Controller）

SimpleDateFormat sdf = new SimpleDateFormat("yyyy");
int currentYear = Integer.parseInt(sdf.format(new Date()));
List years = new ArrayList<>();
for (int i = 0; i < 5; i++) {
    years.add(String.valueOf(currentYear - i));
}
// 返回 JSON：["2024","2023","2022","2021","2020"]
return years; // Spring MVC 配合 @ResponseBody 自動序列化

前端 EasyUI 綁定方式

方式一：直接內聯 data 屬性（適用於靜態/少量數據）

<input id="yearCombo" class="easyui-combobox" 
    data-options="valueField:'id',textField:'text',data:[{id:'2024',text:'2024'},{id:'2023',text:'2023'}]">

方式二：AJAX 動態載入（推薦，分離關注點）

$('#yearCombo').combobox({
    url: '/api/years', // 後端接口返回 JSON 陣列 [{id:'2024',text:'2024'},...]
    valueField: 'id',
    textField: 'text',
    panelHeight: 'auto'
});

若後端直接返回字串陣列 ["2024","2023"]，需用 loadFilter 轉換：

loadFilter: function(data) {
    return $.map(data, function(item) { return {id: item, text: item}; });
}

關鍵點

• 後端返回標準 JSON 陣列，物件需包含 id（值）與 text（顯示文字）欄位。
• 前端對應 valueField、textField。
• 若使用 JSP 直接輸出，注意轉義與引號嵌套，建議採用 AJAX 方式更清晰。