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