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.頁面效果圖如圖：

其中我的要求是隻能查詢安徽省的信息

相關前臺頁面源代碼附件供參考：