Spring MVC + EasyUI實現地區級聯

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級級聯，不管多少級都很簡單了，依葫蘆畫瓢，去試試吧。