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:(校验)
如图:
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 去查询类别的表,获得了一堆数据。
然后需要取出所需要的classid ,className 两个字段对应的数据。
然后我们声明一个map,map是用来存放键值对,需要的传回的kv。也就是把需要的字段封装到map里面。
然后声明一个list,是方便带回前端或者是转json格式用的,List存放map。
其次,如果前台是用的easyui,最后可以添加 @ResponseBody 注解可以直接自动转为json格式传回前台。
这样就实现了我们需要的easyui下拉框从数据库读取数据动态填入。
3.效果图:
注意,上面的控制层写法中:
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页面。