EasyUi结合ssh框架实现省地区表三级联动以及数据回显 个人项目实现思路

    我最近在做一个医疗的管理平台，因为是刚入门，对前端的简易框架EasyUi并不是很熟悉，在实现页面三级联动以及后台数据回显的问题上遇到了困难，因此上网百度了许多的博客，发现很多都不符合我的要求，而且时间长久了，新的博客倒是少的可怜，更何况内容也并不想他们标题所说的那样，十分让人感到困惑，各种各样的都有，我十分怀疑有些博文的代码都没有跑过就拿出来了。还有些就是地理json给的十分混乱，还有些积分资源甚是遥远，不太符合当前的需求了。最后通过看书，看文档，总算实现了出来，现在来分享一下写的流程。

    噢！先摆效果图！

一、绑定控件     .jsp页面

<tr>
						<td>省份</td>
						<td>
						<input name="provinces.provinceid" id="province" required="true"/>
						</td>
					</tr>
					<tr>
						<td>城市</td>
						<td>
						<input name="cities.cityid" id="city" required="true"/>
						</td>
					</tr>
					<tr>
						<td>地区</td>
						<td>
						<input name="areas.areaid" id="area" required="true"/>
						</td>
					<tr>

二、加载js代码，实现动态生成相关数据，实时更新   js

// 下拉框选择控件，下拉框的内容是动态查询数据库信息  
    $('#province').combobox({   
                url:"${pageContext.request.contextPath}/province_ajaxlist.action",  
                editable:false, //不可编辑状态  
                cache: false,    
                valueField:'provinceid',     
                textField:'province',  
                  
    onHidePanel: function(){  
            $("#city").combobox("setValue",'');  
            $("#area").combobox("setValue",'');  
            var province = $('#province').combobox('getValue');       
            if(province!=''){  
            $.ajax({  
                type: "POST",  
                url: "${pageContext.request.contextPath}/city_ajaxlist.action?province="+province,  
                cache: false,  
                dataType : "json",  
                success: function(data){  
                $("#city").combobox("loadData",data);  
                                       }  
                                   });    
                           }  
                     }   
                 });   
      
    $('#city').combobox({   
  
        editable:false, //不可编辑状态  
        cache: false,  
        valueField:'cityid',     
        textField:'city',  
        onHidePanel: function(){  
            $("#area").combobox("setValue",'');  
            var city = $('#city').combobox('getValue');       
            if(city!=''){  
            $.ajax({  
                type: "POST",  
                url: "${pageContext.request.contextPath}/area_ajaxlist.action?city="+city,  
                cache: false,  
                dataType : "json",  
                success: function(data){  
                $("#area").combobox("loadData",data);  
                                       }  
                                   });    
                           }  
                     }  
       });    
    	$('#area').combobox({   
        	editable:false, //不可编辑状态  
        	cache: false, 
        	valueField:'areaid',     
        	textField:'area'  
    	});

三、数据回显 js （里面涉及一个获取json  提取关联对象的属性，再进行动态更新数据 重获json数据）

function doDblClickRow(rowIndex, rowData){
		//form回显
		$('#id').val(rowData.id);
		$('#hospitalName').val(rowData.hospitalName);
		$('#level').val(rowData.level);
		$('#username').val(rowData.username);
		$('#password').val(rowData.password);
		$('#telphone').val(rowData.telphone);
		//标准select回显
		$('#province').combobox('setValue', rowData.provinces.provinceid);
		$('#city').combobox('setValue', rowData.cities.cityid);
		$('#area').combobox('setValue', rowData.areas.areaid);
		 var province = $('#province').combobox('getValue');  
		 $.ajax({  
                type: "POST",  
                url: "${pageContext.request.contextPath}/city_ajaxlist.action?province="+province,  
                cache: false,  
                dataType : "json",  
                success: function(data){  
                $("#city").combobox("loadData",data);  
                                       }  
                                   });
        var city = $('#city').combobox('getValue');  
		 $.ajax({  
                type: "POST",  
                url: "${pageContext.request.contextPath}/area_ajaxlist.action?city="+city,  
                cache: false,  
                dataType : "json",  
                success: function(data){  
                $("#area").combobox("loadData",data);  
                                       }  
                                   });                                
		$('#location').val(rowData.location);
		$('#introduction').val(rowData.introduction);
		$('#addHospitalWindow').window('open');
	}

三、action类的编写，我是省份城市区域单独写的，这里就摆出一个好了

//查询对应省份的所有城市
public String ajaxlist() {
        //调用业务层将列表查出
        List<Cities> citys = cityService.cityajaxlist(province);
                        
        //将处理结果转换json返回
        ActionContext.getContext().put("citys", citys);
        return "ajaxlistSUCCESS";
    }

四、接口类就不写了 ，直接上实现类 Impl

@Override
	public List<Cities> cityajaxlist(String province1) {
		// TODO Auto-generated method stub
		return cityDAO.findByNamedQuery("City.ajaxlist", province1);
	}

对应的City.ajaxlist，加图片的意思你懂得。

五、运行就可以得到要想的效果了！！！