2014/4/18 结合easyui的省市区查询 小结

笔者最近使用easyui的comboxbox控件进行省市区关联查询，要求是省市区要关联到页面的全局变量g_user，包含（省代码provincCode）,(市代码cityCode),区代码（areaCode）,先把源文件中的全局变量告知：

g_user = {
		provinceCode:'110',
		cityCode:'',
		areaCode:'',
};

先贴关键代码：

1.先定义6个全局变量

var searchProvince=g_user.provinceCode;
var searchCity=g_user.cityCode;
var searchArea=g_user.areaCode;

//对应的省市区列表
var provinceInfo;
var cityInfo;
var areaInfo;

其中：provinceInfo,cityInfo,areaInfo是从数据库取出来的省信息

2.相关的html元素，easyui的conbobox空间就是个动态加载数据显示的select下拉框

<select id="searchProvince" class="easyui-combobox" style="width:80px;" data-options="editable:false">
	<option value="">全部省份</option>
</select>
<select id="searchCity" class="easyui-combobox" style="width:80px;" data-options="editable:false">
	<option value="">全部城市</option>
</select>
<select id="searchArea" class="easyui-combobox" style="width:110px;" data-options="editable:false">
	<option value="">全部区域</option>
</select>

3.省市区查询相关的js代码

//查询  加载省下拉框  
	$(document).ready(function(){ 
		//加载省份--provinceInfo
		$("#searchCity").combobox('disable');
		$("#searchArea").combobox('disable');
		var params = {
			"provinceCode":g_user.provinceCode,
			"jsoncallback":true
		};
		$.ajax({
			type:'POST',
			url : '${ctxPath}/location/p/queryProvinces.action',
			async:false,
			data: params,
			success:function(data){
				searchBoxProvinceInfo = $.parseJSON(data).data;
				if(g_user.provinceCode != ""){
					$("#searchProvince").combobox("setValue",searchBoxProvinceInfo[0].provinceName);
					searchProvince = searchBoxProvinceInfo[0].provinceCode;
					$("#searchProvince").combobox('disable');
					loadSearchCity();
				}else{
					element = {provinceCode:'all',provinceName:'全部省份'};
					searchBoxProvinceInfo.unshift(element);
					//获取选中省
					$("#searchProvince").combobox({
						data: searchBoxProvinceInfo,
						valueField:'provinceCode',
						textField:'provinceName',
						panelHeight:180,
						defaultText:"请选择",
						onSelect:function(n,o){
							searchProvince=n.provinceCode;
							if(n.provinceCode=='all'){
								clearSearchCity();
								$("#searchCity").combobox('disable');
							}else{
								searchCity = 'all';
								loadSearchCity();
							}
							clearSearchArea();
							$("#searchArea").combobox('disable');
							$('#resourcestable').datagrid('load');
						}
					});
				}
				
			}
		});
		
	});
	
	//查询  加载市下拉框 ---searchCityInfo
	function loadSearchCity(){
		var params = {
			"provinceCode":searchProvince,
			"cityCode":g_user.cityCode,
			"jsoncallback":true
		};
		$.ajax({
			type:'POST',
			url : '${ctxPath}/location/p/queryCitysByProvince.action',
			data: params,
			async:false,
			success:function(data){
				searchCityInfo = $.parseJSON(data).data;
				if(g_user.cityCode != ""){
					$("#searchCity").combobox('setValue',searchCityInfo[0].cityName);
					searchCity = searchCityInfo[0].cityCode;
					loadSearchArea();
				}else{
					element = {cityCode:'all',cityName:'全部城市'};
					searchCityInfo.unshift(element);
					//获取选中市
					$("#searchCity").combobox({
						data: searchCityInfo,
						valueField:'cityCode',
						textField:'cityName',
						panelHeight:'auto',
						onSelect:function(n,o){
							searchCity=n.cityCode;
							if(n.cityCode=='all'){
								clearSearchArea();
								$("#searchArea").combobox('disable');
							}else{
								searchArea = 'all';
								loadSearchArea();
							}
							$('#resourcestable').datagrid('load');
						}
					});
				}
			}
		});
		
	}
	
	//查询  加载区域下拉框
	function loadSearchArea(){
		//加载区信息
		var params = {
			"provinceCode":searchProvince,
			"cityCode":searchCity,
			"areaCode":g_user.areaCode,
			"jsoncallback":true
		};
		$.ajax({
			type:'POST',
			url : '${ctxPath}/location/p/queryAreasByCity.action',
			data: params,
			async:false,
			success:function(data){
				searchAreaInfo = $.parseJSON(data).data;
				if(g_user.areaCode != ""){
					$("#searchArea").combobox('setValue',searchAreaInfo[0].areaName);
				}else{
					element = {areaCode:'all',areaName:'全部区域'};
					searchAreaInfo.unshift(element);
					//获取选中区
					$("#searchArea").combobox({
						data: searchAreaInfo,
						valueField:'areaCode',
						textField:'areaName',
						panelHeight:'auto',
						onSelect:function(n,o){
							searchArea=n.areaCode;
							$('#resourcestable').datagrid('load');
						}
					});
				}
			}
		});
		
	};
	
	//查询  清空 城市下拉框 searchCity
	function clearSearchCity(){
		searchCity='';
		$("#searchCity").combobox({
			data: blankcity,
			valueField:'cityCode',
			textField:'cityName'
		});	
	}
	
	//查询 清空 区域下拉框 searchArea
	function clearSearchArea(){
		searchArea='';
		$("#searchArea").combobox({
			data: blankarea,
			valueField:'areaCode',
			textField:'areaName'
		});
	}

4.相关说明：

4.1首先上来是市和区按钮失效

$("#searchCity").combobox('disable');
$("#searchArea").combobox('disable');

4.2请求数据，传的参数是文章开头的全部变量，表示我只可以查询该省

var params = {
	"provinceCode":g_user.provinceCode
};

'${ctxPath}/location/p/queryProvinces.action'

这个action请求，表明当g_user.provinceCode为空时查询出来的是全部省信息，否则就是指定的省信息，包括省代码，省名称

4.3处理ajax返回数据

                         searchBoxProvinceInfo = $.parseJSON(data).data;
				if(g_user.provinceCode != ""){
					$("#searchProvince").combobox("setValue",searchBoxProvinceInfo[0].provinceName);
					searchProvince = searchBoxProvinceInfo[0].provinceCode;
					$("#searchProvince").combobox('disable');
					loadSearchCity();
				}else{
					element = {provinceCode:'all',provinceName:'全部省份'};
					searchBoxProvinceInfo.unshift(element);
					//获取选中省
					$("#searchProvince").combobox({
						data: searchBoxProvinceInfo,
						valueField:'provinceCode',
						textField:'provinceName',
						panelHeight:180,
						defaultText:"请选择",
						onSelect:function(n,o){
							searchProvince=n.provinceCode;
							if(n.provinceCode=='all'){
								clearSearchCity();
								$("#searchCity").combobox('disable');
							}else{
								searchCity = 'all';
								loadSearchCity();
							}
							clearSearchArea();
							$("#searchArea").combobox('disable');
							$('#resourcestable').datagrid('load');
						}
					});
				}

对data进行json格式化处理，若要求的省代码不为空，则省下拉框值写死，并进入loadSearchCity（）方法；若要求的省代码为空，既查询省不做限制，则拼加element元素，表示查询所有省信息，并且当省下拉框查询时，获取选中省，传入searchProvince，如果选择的是全部，则清空市下拉选择的值，并且使市下拉失效，区下拉也要清除并且使之失效

$('#resourcestable').datagrid('load');

调用上述语句重新加载datagrid，效果对应于一旦选择了省，就触发一次省查询的操作

市下拉和区下拉代码原理类似，不赘述

5.页面效果图如图：

其中我的要求是只能查询安徽省的信息

相关前台页面源代码附件供参考：