easyui实现下拉框从数据库读取数据动态填入

开发项目的时候遇见一个问题，就是使用easyui的时候，需要采用下拉框，而这个框里面的数据呢，需要是动态的，是从数据库读取数据动态填入的。

记录一下，以后会用到。

1.jsp页面：

easyui创建下拉框。不会的请参考easyui官网。
就是在JSP页面中，添加一个input标签，给标签加上如下属性

 <td>所属类别：</td>
 <td>
     <input type="text" id="className" class="easyui-combobox" name="className" 
 data-options="valueField:'classid',textField:'className',url:'Car/loadCategory',prompt: '请选择汽车类别',required:true,editable:false" />
                    </td>

其中input的各个参数解释：

type：text id : 自定义 name: 自定义 class: 一定要写easyui-combobox （重要）
data-options=” eaitable(是否可以编辑？)
valueField: 数据的键key（重要）
textField:数据的值value（重要）
url:(请求后台的地址）（重要）
prompt：(提示信息)”
required:（校验）

如图：
easyui实现下拉框从数据库读取数据动态填入

2.Controller层：

后台呢就是jsp上的input的url的地方了。

	//回显汽车car分类
	    @RequestMapping("/loadCategory")
	    @ResponseBody
	    public List<Map<String, Object>> loadCategory(HttpServletResponse response){
	    	response.setContentType("text/html;charset=utf-8");
	    	response.setCharacterEncoding("utf-8"); //响应编码
	    	System.out.println("jsp页面加载即触发");
	    	
	    	List<Category> namelist = categoryService.findClassNames();
	    	System.out.println("查询到的类别："+namelist);
	    	
	    	//list存放map，map存放kv值（json），namelist取需要的字段
	    	List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
	    	for (Category category : namelist) {
	    		Map<String, Object> map = new HashMap<String, Object>();
	    		//只取classid、ClassName即可。
	    		String className = category.getClassName().toString();
	    		String classid = category.getClassid().toString();
	    		//map存放键值对
	    		map.put("classid",classid);
		    	map.put("className",className);
		    	//list存放map
		    	list.add(map);
		    	System.out.println("json格式:"+list); //打印出来就成为了json格式
			}
	    	return list;
	    }

是这样的，一般来说，后台都是直接去查询类别这张表，然后返回一个list集合数据。但是我们做下拉框只需要类别id和类别名称即可，根本不需要其他多余的数据项，所以，上面是表示：
namelist 去查询类别的表，获得了一堆数据。
easyui实现下拉框从数据库读取数据动态填入

然后需要取出所需要的classid ，className 两个字段对应的数据。
然后我们声明一个map，map是用来存放键值对，需要的传回的kv。也就是把需要的字段封装到map里面。
然后声明一个list，是方便带回前端或者是转json格式用的，List存放map。

其次，如果前台是用的easyui，最后可以添加 @ResponseBody 注解可以直接自动转为json格式传回前台。

这样就实现了我们需要的easyui下拉框从数据库读取数据动态填入。

3.效果图：

easyui实现下拉框从数据库读取数据动态填入

注意，上面的控制层写法中：

for循环往list中放入map的时候，一直是同一个map，这样就会导致后面的数据覆盖前面的数据，所以我们要把new HashMap的操作放在for循环里面，这样就可以实现多组map的kv值放入list。

List<Map<String,Object>> list1 = new ArrayList<Map<String, Object>>();

表示的是，创建一个List的对象list1。List可以理解为链表，list1链表中的元素是Map类型的元素，而Map是由String到Object的映射，也就是map可以存放键值对。所以是拿来List存放map，然后返回list给前台jsp页面。