wex5實(shí)戰(zhàn)之管理收貨地址（二）

接著上一張管理收貨地址，這章主要講解新增，編輯，選擇省市區(qū)功能，主要有windowReceiver、windowDialog、tree組件的使用。

1、新增、編輯地址，頁面。

在頁面中放入windowReceiver、windowDialog組件

windowReceiver：用于接收地址參數(shù)，判斷是否為新增或編輯。

windowDialog：用于打開選擇省市區(qū)彈窗，返回選擇數(shù)據(jù)。

Model.prototype.windowReceiver1Receive = function(event){

var addressData = this.comp("addressData");

addressData.clear();//清除數(shù)據(jù)

var me=this;

if(this.params.operator == "new"){//為新增

addressData.newData({//新增字段，清除原有數(shù)據(jù)

"defaultValues" : [ {

"id" : justep.UUID.createUUID(),

"fCreateTime" : new Date()

} ]

});

}else{//為編輯

var url = require.toUrl(url_window+"/uapp/getaddressByid.htm?jsoncallback=?");

        $.ajaxSettings.async = false;

        var id = me.params.id!=""?me.params.id:"";

     var datas = {

         id:id

        }

      $.getJSON(url,datas,function(data) {//通過傳人id獲取當(dāng)前id數(shù)據(jù)返回data組件

addressData.loadData(data.areaItem);

addressData.first();//若數(shù)據(jù)加載不出，可加上此代碼試試

}); 

}

};

//判斷手機(jī)號碼，失焦時(shí)判斷手機(jī)號碼正則

Model.prototype.mobileInputBlur = function(event){

var phone = this.comp('mobileInput').val();

var phoneReg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

if(!phoneReg.test(phone) || phone == ""){

util.hint("手機(jī)號碼有誤，請重新輸入");

this.comp('mobileInput').val('');

}

};

2、選擇省市區(qū)。

//選擇省市

Model.prototype.chooseAddressClick = function(event){

this.comp('chooseAddInput').val('');

this.comp("windowDialog1").open();//點(diǎn)擊input彈出省市區(qū)頁面。

};

3、tree使用

使用tree組件的json數(shù)據(jù)必須是固定一種結(jié)構(gòu)

json:

{"rows":[//fparentID父級id，
	{
		"fID":"1","Name":"北京市","fparentID":{},
		"rows":[
			{
				"fID":"1_2","Name":"市轄","fparentID":"1",
				"rows":[
				{
					"fID":"2_5","Name":"海淀區(qū)","fparentID":"1_2"
				},{
					"fID":"2_5","Name":"朝陽區(qū)","fparentID":"1_2"
				},{
					"fID":"2_6","Name":"中關(guān)村","fparentID":"1_2"
				}
				]
		    },{
				"fID":"1_3","Name":"地區(qū)","fparentID":"1"
			},{
				"fID":"1_4","Name":"地區(qū)2","fparentID":"1"
			}
		]
	},
	{
		"fID":"2","Name":"江蘇省","fparentID":{},
		"rows":[
			{
				"fID":"2_5","Name":"南京市","fparentID":"2",
				"rows":[
				{
					"fID":"2_5","Name":"六合區(qū)","fparentID":"2_5"
				},{
					"fID":"2_5","Name":"白下區(qū)","fparentID":"2_5"
				},{
					"fID":"2_6","Name":"秦淮區(qū)","fparentID":"2_5"
				}
				]
			},{
				"fID":"2_7","Name":"泰州市","fparentID":"2",
				"rows":[
				{
					"fID":"2_5","Name":"泰興市","fparentID":"2_7"
				},{
					"fID":"2_5","Name":"興化市","fparentID":"2_7"
				},{
					"fID":"2_6","Name":"海陵區(qū)","fparentID":"2_7"
				}
				]
			},{
				"fID":"2_6","Name":"常州市","fparentID":"2"
			}
		]
	}

]}

設(shè)置選擇最后一級時(shí)隱藏右側(cè)箭頭

當(dāng)點(diǎn)擊到最后一級時(shí)，將當(dāng)前id，名稱返回到新增地址頁面

me.comp("windowReceiver1").windowEnsure({"city":city,"areaid":datas.id});//返回參數(shù)

使用windowEnsure返回參數(shù)并關(guān)閉頁面

4、現(xiàn)在已經(jīng)獲得到省市區(qū)id，名稱，返回到新增地址頁面，

使用windowDialog1的參數(shù)接收事件接收返回參數(shù)并賦值到對應(yīng)組件中

Model.prototype.windowDialog1Receive = function(event){

var city = event.data.city;

var areaid = event.data.areaid;

this.comp("chooseAddInput").val(city);

this.comp("areaidInput").val(areaid);

this.comp("areaInfoInput").val('');

};

5、點(diǎn)擊保存按鈕保存到數(shù)據(jù)庫并返回管理地址頁面

1）上面已使用正則判斷手機(jī)號了，分別再判斷每個(gè)input中對應(yīng)數(shù)據(jù)是否為空或填寫不正確，彈出提示框

if(name == ""){

util.hint("姓名不能為空,請重新輸入");

return;

}else if(phone == ""){

util.hint("手機(jī)號不能為空,請重新輸入");

return;

}else if(city_address == ""){

util.hint("請選擇您的所在地");

return;

}else if(address == ""){

util.hint("請輸入您的詳細(xì)地址");

return;

}

以上步驟均無誤后使用getJSON保存數(shù)據(jù)并跳轉(zhuǎn)頁面

$.getJSON(url,datas, function(data) {

if(data.returnFlag == 100){

util.hint("保存成功！");

var url = require.toUrl('./ManageAddress.w');

justep.Shell.showPage(url);

}

})

以上為管理收貨地址，增刪改查，重要知識點(diǎn)為：

1、windowReceiver、windowDialog：傳參，接收參數(shù)跳轉(zhuǎn)頁面

2、tree、showPage、list：組件使用（注：若關(guān)聯(lián)字段有問題的話input框會(huì)禁用）

3、使用this.comp('xx').val()有時(shí)獲取不到值得話可換成$('[xid=xx]').val();

4、若事件中有相同代碼可提取出單獨(dú)定義函數(shù)，使用this.函數(shù)名();調(diào)用

5、colorData.find(["fStatus"],["1"],false,true,true);第三個(gè)值設(shè)為false則返回多條數(shù)據(jù)

6、util.hint("xxxx");wex5封裝提示框，

頁面中引入var util = require("$UI/system/lib/base/util");即可