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;

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>

//查询  加载省下拉框  
	$(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,url : '${ctxPath}/location/p/queryCitysByProvince.action',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',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,url : '${ctxPath}/location/p/queryAreasByCity.action',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',o){
							searchArea=n.areaCode;
							$('#resourcestable').datagrid('load');
						}
					});
				}
			}
		});
		
	};
	
	//查询  清空 城市下拉框 searchCity
	function clearSearchCity(){
		searchCity='';
		$("#searchCity").combobox({
			data: blankcity,textField:'cityName'
		});	
	}
	
	//查询 清空 区域下拉框 searchArea
	function clearSearchArea(){
		searchArea='';
		$("#searchArea").combobox({
			data: blankarea,textField:'areaName'
		});
	}

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

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

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

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

4.3处理ajax返回数据

                         searchBoxProvinceInfo = $.parseJSON(data).data;
				if(g_user.provinceCode != ""){
					$("#searchProvince").combobox("setValue",o){
							searchProvince=n.provinceCode;
							if(n.provinceCode=='all'){
								clearSearchCity();
								$("#searchCity").combobox('disable');
							}else{
								searchCity = 'all';
								loadSearchCity();
							}
							clearSearchArea();
							$("#searchArea").combobox('disable');
							$('#resourcestable').datagrid('load');
						}
					});
				}

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

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

5.页面效果图如图：

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!