Easyui实现省市县三级联动

2014-11-24 00:35:07 · 作者: · 浏览: 0

Easyui调用数据库实现省市县区三级联动的效果如果下

\


\


\


1、首先要设计数据库,如图所示。一个有4个字段code,note,pycode。code:行政区划代码,note:中文注释,pycode:拼音缩写。 其中code是由6个字段组成。如果是省级最后4位是0000,如果是地级市最后2位是00,其他是县区。

我已经把相关数据库代码上传到我的csdn资源中,需要的同学自行下载。

\


2、我用的是java、SSH框架结合Easyui控件< http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGJyPgo8L3A+CjxwPjOhomh0bWy0+sLryOfPwjwvcD4KPHA+PC9wPgo8cHJlIGNsYXNzPQ=="brush:java;"> 省: 市: 县区:
4、对应的JS代码如下

$(function(){
	
	// 下拉框选择控件,下拉框的内容是动态查询数据库信息
 	$('#province').combobox({ 
			    url:'apply/provinceCombobox_combobox.action',
			    editable:false, //不可编辑状态
			    cache: false,
			   // panelHeight: 'auto',//自动高度适合
			    valueField:'code',   
			    textField:'note',
			    
 	onHidePanel: function(){

		    $("#city").combobox("setValue",'');
		    $("#county").combobox("setValue",'');
		    $("#cregicounty").val('');
			var province = $('#province').combobox('getValue');		
			if(province!=''){
			$.ajax({
				type: "POST",
				url: "apply/cityCombobox_combobox.action province="+province,
				cache: false,
				dataType : "json",
				success: function(data){
				$("#city").combobox("loadData",data);
		                               }
	                               }); 	
                           }
                     } 
                 }); 
	
	$('#city').combobox({ 

	    editable:false, //不可编辑状态
	    cache: false,
	    //panelHeight: 'auto',//自动高度适合
	    valueField:'code',   
	    textField:'note',
	    onHidePanel: function(){
	    	$("#cregicounty").val('');
		    $("#county").combobox("setValue",'');
			var city = $('#city').combobox('getValue');		
			if(city!=''){
			$.ajax({
				type: "POST",
				url: "apply/countyCombobox_combobox.action city="+city,
				cache: false,
				dataType : "json",
				success: function(data){
				$("#county").combobox("loadData",data);
		                               }
	                               }); 	
                           }
                     }
	   });  
	$('#county').combobox({ 
	    editable:false, //不可编辑状态
	    cache: false,
	   // panelHeight: 'auto',//自动高度适合
	    valueField:'code',   
	    textField:'note',
	    onHidePanel: function(){
         var str=$('#county').combobox('getText');
		    $("#cregicounty").val(str);	
                     }
	 });  
  
   $('#country').combobox({//国家代码初始化 
		valueField:'english',   
	    textField:'note',
	    url:'json/country.json',
	    cache: false,
	   //panelHeight: 'auto',//自动高度适合
	    onChange: function(newValue,oldValue){	

	    	countrySearch(newValue);
	    	countrys(newValue);
	    }
	});
});

5、 Java的Action代码

	//查询全国行政区代码省
	public String provinceCombobox() throws Exception{
		
		List list=comboboxService.findProvince();
		this.jsonUtil(list);
		return null;
	}
	
	//查询全国行政区代码市
	public String cityCombobox() throws Exception{
			
		List list=comboboxService.findCity(province);
		this.jsonUtil(list);
	    return null;
	}
		
	//查询全国行政区代码县区
	public String countyCombobox() throws Exception{
		
		List list=comboboxService.findCounty(city);
		this.jsonUtil(list);
	    return null;
	}
	
	
	//调用json工具方法,传入参数alist
	public void jsonUtil(Object accountlist) throws Exception{
			HttpServletResponse response = ServletActionContext.getResponse();		
			log.info("JSON格式:" + accountlist.toString());
			
			String returnJson = JsonConvert.returnJson(accountlist);
			response.setCharacterEncoding("utf-8");
			response.getWriter().println(returnJson);
		}


6、工具JSON代码

import java.io.StringWriter;

import org.codehaus.jackson.map.ObjectMapper;

public class JsonConvert {
	static String jsonStr;
	public static String returnJson(Object object) throws Exception{
		ObjectMapper objectMapper = new ObjectMapper();
		StringWriter stringWriter = new StringWriter();
		objectMapper.writeva lue(stringWriter, object);
		
		jsonStr = stringWriter.toString();
		return jsonStr;
	}
}

7、对应接口代码

	//查询省
	public List findProvince() throws Exception;
	
	//查询市
	public List findCity(String code) throws Exception;
	
	//查询县区
	public List findCounty(String code) throws Exception;

8、对应接口实现类代码

	//下拉框--查询省
	public List findProvince()  {
		log.info("===下拉框--查询省");

		Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class);
		criteria.add(Restrictions.like("code", "%0000"));
		criteria.addOrder(Order.asc("code"));
		
		return criteria.list();
	}
	
	//下拉框--查询市
	public List findCity(String code2)  {
		log.info("===下拉框--查询市");
		String id=code2.substring(0,2);

		Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class);
		criteria.add(Restrictions.like("code", id+"%00"));
		criteria.add(Restrictions.ne("code",code2 ));
		criteria.addOrder(Order.asc("code"));
		
		return criteria.list();
	}
		
	//下拉框--查询县区
	public List findCounty(String code3)  {
		log.info("===下拉框--查询县区");

		String id=code3.substring(0,4);
		Criteria criteria=this.sessionFactory.getCurrentSession().createCriteria(CareacodeTblQg.class);	
		
		criteria.add(Restrictions.like("code", id+"%"));
		criteria.add(Restrictions.not(Restrictions.like("code", "%01")));
		criteria.add(Restrictions.ne("code",code3 ));
		criteria.addOrder(Order.asc("code"));
		
		return criteria.list();
		}