1. 程式人生 > >easyui -combobox 動態獲取下拉列表 前後臺完整過程

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();

}

}

以上全是個人的編寫  註釋是根據自己的理解   如果有錯 歡迎大佬指點 謝謝