easyui combobox獲取後臺資料庫資料的方式介紹
阿新 • • 發佈：2018-12-31
今天中午利用午休時間，學習了一下easyui combobox控制元件的的使用，可以參見下面的連線檢視與combobox 相關的資料
(一)、功能需求（如下圖所示）:獲取行政區劃顯示在下拉列表中
（二）、前臺實現conbomox.jsp
2.1、引入easyui相關檔案到專案，在這裡不多做介紹了，童鞋們可以自己度一下
2.2、簡單設定combobox的外形，combobox控制元件的id="admiDivisionCode"
程式碼如下：
2.3、初始化combobox：將從資料庫獲取的行政區劃載入到combobox控制元件的下拉列表中<body> <div class="easyui-layout" data-options="fit:true"> <input class="easyui-combobox" id="admiDivisionCode" name="admiDivisionCode" style="width:150px" data-options="required:true" /> </div> </body>
下面介紹四種方法載入資料庫資料到combobox
2.3.1、方法1： 呼叫$.get()獲取資料
2.3.2、方法2： 呼叫$.getJSON()獲取資料$(document).ready(function(){ queryXzqh(); }) function queryXzqh(){ $.get("${base}/combobox/queryXzqh.action",function(data){//後臺請求 var options=$("#admiDivisionCode").combobox('options'); options.textField="NAME"; options.valueField="CODE"; //載入資料 $("#admiDivisionCode").combobox("loadData",data.data); ,"json"); } </script>
<pre name="code" class="html"><script type="text/javascript">
$(document).ready(function(){
queryXzqh();
})
function queryXzqh(){ //後臺請求url
var url = "${base}/combobox/queryXzqh.action";$.getJSON(url, function(json) { $('#admiDivisionCode').combobox({ data : json.data,//獲取要顯示的json資料 valueField: 'CODE', textField: 'NAME', }); }); } </script>
2.3.3、方法3： 呼叫$.ajax({}）獲取資料
<pre name="code" class="html"><script type="text/javascript">
$(document).ready(function(){
queryXzqh();
})
function queryXzqh(){
$.ajax({
type: "POST",
url: "${base}/combobox/queryXzqh.action",
data: '',
//contentType: "application/json; charset=utf-8",//去掉這個就可以實現了,為什麼呢？？？
dataType: "json",
success: function(response){//呼叫成功
var options=$("#admiDivisionCode").combobox('options');
options.textField="NAME";//必須要和資料庫查詢的欄位一樣(大小寫敏感)
options.valueField="CODE";
//載入資料
$("#admiDivisionCode").combobox("loadData",response.data);
},
}); 2.3.4、方法4： 呼叫$("#admiDivisionCode").combobox({})獲取資料
<pre name="code" class="html"><script type="text/javascript">
$(document).ready(function(){
queryXzqh();
})
function queryXzqh(){
$("#admiDivisionCode").combobox({
url:"${base}/combobox/queryXzqh.action",//獲取資料
// 向伺服器請求的模式
method : "post",
valueField: 'CODE',
textField: 'NAME',
})
}
</script>（三）、後臺實現
3.1、ComboboxController.java
@Controller
@RequestMapping(value="combobox")
public class ComboboxController {
@Autowired
private ComboboxServiceImpl comboboxServiceImpl;
// @描述：獲取行政區劃(適用於前臺三種方法的呼叫)
@RequestMapping(value = "queryXzqh")
@ResponseBody
public ResultVO<List<Map<String,Object>>> queryXzqh(){
ResultVO<List<Map<String,Object>>> resultVO = new ResultVO<List<Map<String,Object>>>();
try{
List<Map<String,Object>> list =comboboxServiceImpl.queryXzqh();
resultVO.setData(list);
resultVO.setResult(ResultConstant.RESULT_SUCCESS);
resultVO.setMessage(ResultConstant.MESSAGE_SUCCESS);
}catch(Exception e){
e.printStackTrace();
resultVO.setResult(ResultConstant.RESULT_FAIL);
resultVO.setMessage(ResultConstant.MESSAGE_FAIL);
}
return resultVO;
}
//描述：獲取行政區劃(適用於方法四的前臺呼叫)
/*
@RequestMapping(value="/queryXzqh.action")
@ResponseBody
public JSONArray queryXzqh(){
net.sf.json.JSONArray jsonArray=new JSONArray() ;
List<Map<String, Object>> list= new ArrayList<Map<String,Object>>();
try{ //獲取資料庫的資料
list=comboboxServiceImpl.queryXzqh(); //將獲取的list轉化為json格式
jsonArray = net.sf.json.JSONArray.fromObject(list);
}catch(Exception e){
e.printStackTrace();
}
return jsonArray;
}*/
}3.2、service層ComboboxServiceImpl.java
@Service
public class ComboboxServiceImpl {
@Autowired
private ComboboxDaoImpl comboboxDaoImpl;
public List<Map<String, Object>> queryXzqh(){ //呼叫底層dao資料
return comboboxDaoImpl.queryXzqh();
}
}
@Repository
public class ComboboxDaoImpl extends BaseHibernateDao {
public List<Map<String, Object>> queryXzqh(){
String sql = "select d.code,d.name from cendic.d_dictionary_item d left join cendic.d_dictionary_item d1 on d.parent_id=d1.id "
+ "where (d1.code='510100' and d1.id=d.parent_id) or d.code='510100' order by d.code";
//建立查詢物件
Query query=this.createSQLQuery(sql, null, null, null);
//獲取List
List<Map<String, Object>> list=query.setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();
if(list.size()>0){
return list;
}else{
return null;
}
}
}（四）、總結1、combobox載入遠端資料的用第四種方式接收資料的時候遇到的一個問題是：前臺能夠獲取到後臺傳來的資料，但是當combobox就是載入不出來資料，當時鬱悶死了，怎麼都找不出問題，然後就想會不會是返回的資料格式問題
combobox必須載入json格式才能顯示，那我把返回的list資料轉化為json格式之後在傳到前臺，然後居然就真的加載出來了，但是
還是很很多疑問，比如為什麼返回list型別資料用$.get()、$.ajax()、$.getJSON（）都沒有轉化為json格式也可以載入成功，到底是為什麼呢？？？？？？
返回的list資料格式在Debug下如下圖：這不是json格式的資料
疑問還有待解決?????????