easyui的combobox实现三级查询

1、业务需求

选择某栋宿舍楼，然后选择这栋楼的某一层，然后在选择这一层的某间寝室

2、实现思路

先从数据库查询出宿舍楼列表，初始化宿舍楼的组合框，让用户选择其中一项，选了之后将该楼传参到后台，让后台根据该值查询出该楼有哪些楼层，将查询结果填充到楼层的组合框，用户再次选择后将楼层和宿舍楼返回到后台，后台根据这两个参数查询出这栋楼、这一层的所有宿舍

3、前端代码

		<div>
			<span>宿舍楼</span>
			<input id="bid" class="easyui-combobox" name="bid" 
					data-options="
						url:'${pageContext.request.contextPath}/getbid.action',//加载宿舍楼数据的后台方法
						method:'get',
						valueField:'id',
						textField:'text',
						editable:false,
						//当用户选择某一项时，触发此事件，rec为用户当前所选项
						onSelect:function(rec){
							var bid=rec.text;//取值
							$('#floor').combobox('clear');//清除之前楼层的选项
							//加载楼层数据的后台方法,拼接参数到url上
							var url='${pageContext.request.contextPath}/getfloor.action?bid='+bid;
							$('#floor').combobox('reload',url);//重新加载楼层的数据
						}" />
			<span>楼层</span>
			<input id="floor" class="easyui-combobox" name="floor" 
					data-options="
						valueField:'id',
						textField:'text',
						editable:false,
						onSelect:function(rec){
							var bid=$('#bid').combobox('getValue');
							var floor=rec.text;
							//清除之前宿舍的选项
							$('#room').combobox('clear');
							//加载宿舍的后台方法，拼接参数到url上
							var url='${pageContext.request.contextPath}/getroom.action?bid='+bid+'&floor='+floor;
							$('#room').combobox('reload',url);//重新加载
						}" />
			<span>宿舍</span>
			<input id="room" class="easyui-combobox" name="room" 
					data-options="
						valueField:'id',
						textField:'text',
						editable:false
					" />
			<a id="search-btn" href="javascript:;" class="easyui-linkbutton" plain="true" iconCls="icon-search">查询</a>
		</div>

没有用JavaScript给楼层和宿舍号指定加载自己的url是因为我的楼层和宿舍一定要参数，如果在script中给定了它们加载的url，则页面加载完毕时就会自动去后台执行方法，但此时宿舍楼还没选择，因此无参数，浏览器的console就会报错，导致程序不能继续执行

4、后台代码

controller

	/**
	 * 查询所有的宿舍楼
	 * @return
	 */
	@RequestMapping(value="/getbid.action")
	@ResponseBody
	public List<ComboboxModel> getBid()
	{
		List<ComboboxModel> models=new ArrayList<>();
		List<String> list = dormManageService.getRDbidType();
		for (String item : list) {
			models.add(new ComboboxModel(item,item));
		}
		System.out.println(models.toString());
		return models;
	}
	
	/**
	 * 查询所选宿舍楼的楼层数
	 * @param bid 所选宿舍楼
	 * @return
	 */
	@RequestMapping(value="/getfloor.action")
	@ResponseBody
	public List<ComboboxModel> getFloor(@RequestParam("bid")String bid)
	{
		List<ComboboxModel> models=new ArrayList<>();
		List<String> list = dormManageService.getRDfloorType(bid);
		for (String item : list) {
			models.add(new ComboboxModel(item,item));
		}
		System.out.println(models.toString());
		return models;
	}
	
	/**
	 * 查询所选楼层的宿舍号
	 * @param bid 所选宿舍楼
	 * @param floor 所选楼层
	 * @return
	 */
	@RequestMapping(value="/getroom.action")
	@ResponseBody
	public List<ComboboxModel> getRoom(@RequestParam("bid")String bid,@RequestParam("floor") String floor)
	{
		List<ComboboxModel> models=new ArrayList<>();
		List<String> list = dormManageService.getRDroomType(bid, floor);
		for (String item : list) {
			models.add(new ComboboxModel(item,item));
		}
		System.out.println(models.toString());
		return models;
	}

专门为了combobox而建的pojo

package com.pojo;

public class ComboboxModel {
	
	private String id;//用作combobox的value
	
	private String text;//用作combobox的text
	
	public ComboboxModel() {
		super();
	}
	
	public ComboboxModel(String id, String text) {
		super();
		this.id = id;
		this.text = text;
	}

	public String getId() {
		return id;
	}
	
	public void setId(String id) {
		this.id = id;
	}
	
	public String getText() {
		return text;
	}
	
	public void setText(String text) {
		this.text = text;
	}
	
	@Override
	public String toString() {
		return "ComboboxModel [id=" + id + ", text=" + text + "]";
	}
}