1. 程式人生 > >easyui實現簡單的下拉框

easyui實現簡單的下拉框

首先,在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下拉框就實現了,如下圖
這裡寫圖片描述