本文记录开发中两级下拉框的实现，利用EasyUI-combotree工具，在前端进行增删改查时，选择部门所在的地点，在下拉框中选择。
参考博客：https://www.cnblogs.com/chanke/p/5707517.html
jsp代码
<div class="searchTips"><span class="tipsSpan">所在区域：</span> <input id="searchFkPubLocationName" type="text" class="input-text size-MINI tipsIpt easyui-combotree" style="width:160px;" data-options="method:'get'">
</div>
js代码
这里远程动态获取数据库里的数据
function init_combo() {
//所属地区下拉框$.ajax({
type: "POST",url : contextPath + '/location/queryFirstLocaList.do', dataType : 'json',success: function(data) {
//表单$('.FormFkPubLocationId').combotree({
data:data});//初始状态：折叠$(".FormFkPubLocationId").combotree('tree').tree("collapseAll"); } });
}
service层
@Overridepublic List<Map<String, Object>> queryFirstLocaList() throws Exception {
GenericQueryParam param = new GenericQueryParam();List<Map<String, Object>> listTest = locationMapper.selectFirstLocaList();Map<String, Object> map= new HashMap<String, Object>(); //for循环，将每个map加上childrenfor(int i=0;i<listTest.size();i++){
map=listTest.get(i);param.clear();param.fill("pPkDeptId",map.get("id"));List<Map<String, Object>> childrenList=locationMapper.selectSecondLocaList(param);map.put("children",childrenList );//children为二级列表listTest.set(i, map);}return listTest;}
通过调试，进入for循环前 listTest 内容是这样的（获取中国所有的省份/直辖市）
[{
id=247, text=北京}, {id=248, text=天津}, {id=249, text=河北}, {id=250, text=山西}, {id=251, text=内蒙古}, {id=252, text=辽宁}, {id=253, text=吉林}, {id=254, text=黑龙江}, {id=255, text=上海}, {id=256, text=江苏}, {id=257, text=浙江}, {id=258, text=安徽}, {id=259, text=福建}, {id=260, text=江西}, {id=261, text=山东}, {id=262, text=河南}, {id=263, text=湖北}, {id=264, text=湖南}, {id=265, text=广东}, {id=266, text=广西}, {id=267, text=海南}, {id=268, text=重庆}, {id=269, text=四川}, {id=270, text=贵州}, {id=271, text=云南}, {id=272, text=西藏}, {id=273, text=陕西}, {id=274, text=甘肃}, {id=275, text=青海}, {id=276, text=宁夏}, {id=277, text=新疆}, {id=278, text=台湾}, {id=279, text=香港}, {id=280, text=澳门}]
不可避免，以下是数据库结构，PID为所属地区，可见亚洲ID为1，中国PID为1，中国所属亚洲
这是param，参数作为PID拿到后面中。下图参数pPkDeptId是247。这是北京的ID，作为PID，即查询北京下一级的地区
for循环的作用是，将所有省/直辖市的下一级地区获取
for循环后的 listTest 内容是这样的。可以看到北京的区已经全部获取到了。二级区域名都在一级地区名的children下，方便combotree拿到数据后好处理。
[{
id=247, text=北京, children=[{id=3021, text=东城}, {id=3022, text=西城}, {id=3023, text=朝阳}, {id=3024, text=丰台}, {id=3025, text=石景山}, {id=3026, text=海淀}, {id=3027, text=门头沟}, {id=3028, text=房山}, {id=3029, text=通州}, {id=3030, text=顺义}, {id=3031, text=昌平}, {id=3032, text=大兴}, {id=3033, text=平谷}, {id=3034, text=怀柔}, {id=3035, text=密云}, {id=3036, text=延庆}]},
{id=248, text=天津, children=[{id=3037, text=和平}, {id=3038, text=河东}, {id=3039, text=河西}, {id=3040, text=南开}, {id=3041, text=河北}, {id=3042, text=红桥}, {id=3043, text=滨海新区}, {id=3044,
…
}]
xml代码
因为对combotree不甚了解，所以直接将数据名返回为 id text，这样，返回到前端，转为json格式后可以直接被combotree拿去用。
<!-- 获取中国省份/直辖市 供一级单位管理使用--><select id="selectFirstLocaList" parameterType="string"resultType="hashmap">SELECT ID id,NAME textFROMt_bas_pub_locationWHERE PID=7</select><!-- 二级区域列表 --><select id="selectSecondLocaList" parameterType="param"resultType="hashmap">SELECTID id,NAME textFROMt_bas_pub_locationWHERE PID=#{
pPkDeptId}</select>
效果图
缺点：这样可能会由于页面加载过多数据，导致页面初始化或刷新的时候，延时较高。