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>

<script type="text/javascript"src="assets/easyui/locale/easyui-lang-zh_CN.js">script>

第二,在页面设置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 dicts = iDictionaryTableService.selectByType(type);
        response.getWriter().write(JSONArray.fromObject(dicts).toString());
    }

至此,一个简单的easyui下拉框就实现了,如下图
easyui实现简单的下拉框_第1张图片

你可能感兴趣的:(easyui实现简单的下拉框)