Spring MVC + EasyUI实现地区级联

来源：互联网发布：淘宝公告栏素材编辑：程序博客网时间：2024/05/18 01:38

1、JSP

<input id="sj" class="easyui-combobox" id="nextAgency" data-options="width:103,prompt:'请选择省份',editable:false,url:'${ctx}/xxx/xxxAction/listDistrict',valueField:'aaa020',idField:'aaa020',parentField:'parent',textField:'aaa021',toggleOnClick:'true', onSelect:function(district){$('#cs').combobox('clear');$('#cs').combobox('reload','${ctx}/xxx/xxxAction/listDistrict?parent='+district.aaa020)},onLoadSuccess:function(){ $('#sj').combobox('setValue',${sjCode!=null? sjCode : "''"}); $('#cs').combobox('setValue',${csCode!=null? csCode : "''"}); }"/>                              <input id="cs" class="easyui-combobox" data-options="width:100,prompt:'请选择城市' ,                                                        valueField:'aaa020',editable:false,idField:'aaa020',parentField:'parent',                                                        textField:'aaa021',onSelect:function(district){$('#qx').combobox('clear');                                                        $('#qx').combobox('reload','${ctx}/xxx/xxxAction/listDistrict?parent='+district.aaa020)},                                                        onLoadSuccess:function(){ $('#qx').combobox('setValue',${qxCode!=null? qxCode : "''"});}"/><input id="qx" class="easyui-combobox" data-options="width:100,prompt:'请选择区县' ,                                                        valueField:'aaa020',editable:false,idField:'aaa020',parentField:'parent',textField:'aaa021',                                                        onSelect:function(district){$('#jd').combobox('clear');                                                        $('#jd').combobox('reload','${ctx}/xxx/xxxAction/listDistrict?parent='+district.aaa020)},                                                        onLoadSuccess:function(){ $('#jd').combobox('setValue',${jdCode!=null? jdCode :  "''"});}"/><input id="jd" class="easyui-combobox"  data-options="width:121,prompt:'请选择乡镇(街道)' ,                                                          valueField:'aaa020',editable:false,idField:'aaa020',parentField:'parent',textField:'aaa021',                                                          onSelect:function(district){$('#sq').combobox('clear');                                                          $('#sq').combobox('reload','${ctx}/xxx/xxxAction/listDistrict?parent='+district.aaa020)},                                                          onLoadSuccess:function(){ $('#sq').combobox('setValue',${sqCode!=null?sqCode :  "''"});}"/><input id="sq" class="easyui-combobox" data-options="width:100,prompt:'请选择社区' ,                                                        valueField:'aaa020',editable:false,idField:'aaa020',parentField:'parent',textField:'aaa021'"/>

2、Action

 /**     * 获得行政区划     * @param parent 父节点编码     * @return     */    @RequestMapping(value = "/listDistrict")    @ResponseBody    public void listDistrict(String parent,HttpServletRequest request,HttpServletResponse response){        try {            request.setCharacterEncoding("UTF-8");            response.setCharacterEncoding("UTF-8");            response.setContentType("text/html");            List<District> list = districtService.listDistrict(parent);            String json = JSONArray.toJSONString(list);            response.getWriter().write(json);        } catch (Exception e) {            e.printStackTrace();            //TODO 作异常处理        }    }

为了便于理解，关键的点解释一下吧：

1、表结构，需要有存放父级节点ID的字段，如上面的parent

2、第一次加载省级的地区列表，如第一个Input中的：url:'${ctx}/xxx/xxxAction/listDistrict'；

3、当选择了省份，就触发onSelect中的函数，先清空市级中的数据，再重新加载当前选择的省份下的市级地区列表；

4、onLoadSuccess中的函数是为了对表单修改时地区的回显。

其实会了2级级联，不管多少级都很简单了，依葫芦画瓢，去试试吧。

阅读全文

0 0