Spring MVC + EasyUI实现地区级联

最新推荐文章于 2018-05-09 22:03:02 发布

低头望明月

最新推荐文章于 2018-05-09 22:03:02 发布

阅读量722

点赞数

CC 4.0 BY-SA版权

分类专栏： springmvc 地区级联 EasyUI 文章标签：地区级联 easyui spring mvc

本文链接：https://blog.youkuaiyun.com/qq_25320187/article/details/76070310

springmvc 同时被 3 个专栏收录

3 篇文章

订阅专栏

EasyUI

3 篇文章

订阅专栏

地区级联

1 篇文章

订阅专栏

本文介绍如何使用JSP结合EasyUI插件实现地址级联选择功能，包括省份、城市、区县等多级联动，并展示了具体的HTML代码及后端Action处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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级级联，不管多少级都很简单了，依葫芦画瓢，去试试吧。