easyui實現簡單的下拉框
阿新 • • 發佈:2019-02-19
首先,在jsp頁面加入easyui和jquery的檔案如下
<script type="text/javascript" src="assets/bootstrap/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="assets/easyui/jquery.easyui.min.js"></script>
<!-- easyui的本地化 -->
<script type="text/javascript"src="assets/easyui/locale/easyui-lang-zh_CN.js "></script>
第二,在頁面設定input標籤,如下
資料狀態:<input id="qysjzt" name="qysjzt" class="easyui-combobox" width="50px">
第三,使用ajax請求初始化,如下
<script type="text/javascript">
$(function(){
$.ajax({
url:"rest/dict/selectdict",
dataType:"json",
type:"GET",
data:{
"type" :"audit_state"
},
success:function(data){
//繫結第一個下拉框
$('#qysjzt').combobox({
data: data,
valueField: 'code',
textField: 'description' }
);
},
error:function(error){
alert("初始化下拉控制元件失敗");
}
})
}
)
</script>
第四,寫後臺的處理(這裡用的是SpringMVC)
/**
* 查詢字典表
* @throws IOException
*/
@RequestMapping(value = "/selectdict", method = RequestMethod.GET)
public void selectUserType(@RequestParam String type) throws IOException {
List<DictionaryTable> dicts = iDictionaryTableService.selectByType(type);
response.getWriter().write(JSONArray.fromObject(dicts).toString());
}
至此,一個簡單的easyui下拉框就實現了,如下圖