easyui -combobox 動態獲取下拉列表 前後臺完整過程
前臺:通過url=roleNameList.do 向後臺獲取json資料
$(function(){
$.getJSON("roleNameList.do",function(json) {
$('#roleName').combobox({
data: json.roleList, //獲取到的json 資料
valueField:"id",
textField:"text"
});
});
});
<select name="roleName" class="easyui-combobox" id="roleName" style="width: 154px;" editable="false" panelHeight="auto"></select>
後臺:
@ResponseBody()
@RequestMapping("roleNameList.do")
public String getRoleNameList(HttpServletResponse res) throws Exception{
List<RoleAuth> role=menuService.getAllRole(); //用來獲取資料庫中的Role表資料
ComboboxTool combobox=null; //下面會有這個bean物件 用來儲存 valueField:"id", textField:"text" 中的id 和text
List<ComboboxTool > roleList=new ArrayList(); //roleList集合儲存ComboboxTool物件用做json的資料
JSONObject json=new JSONObject(); //json 傳回前臺
for(RoleAuth roleAuth:role){ //遍歷資料庫中獲取的role表資料
combobox=new CommboxTool(); //將combobox物件中的id 、text 賦值 並將每個物件加入到roleLsit 集合中
combobox.setId(roleAuth.getbRoleID());
combobox.setText(roleAuth.getvRoleName());
roleList.add(combobox);
}
json.put("roleList", roleList);
ResponseUtil.write(res, json);將roleList存進json 傳回前臺ResponseUtil.write(res, json)是一個自定義工具類 後面有給出程式碼
return null;
}
Combobox 類
public class CommboxTool {
private int id;
private String text;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
ResponseUtil 類
package com.liuhai.eshop.util;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletResponse;
/***
* 主要用於返回json資料
*/
public class ResponseUtil {
public static void write(HttpServletResponse response,Object object)throws Exception{
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
out.println(object);
out.flush();
out.close();
}
}
以上全是個人的編寫 註釋是根據自己的理解 如果有錯 歡迎大佬指點 謝謝