wex5實(shí)戰(zhàn)之管理收貨地址（二）-創(chuàng)新互聯(lián)

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

10年積累的網(wǎng)站設(shè)計(jì)制作、做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有東寶免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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ī)號碼，失焦時判斷手機(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è)置選擇最后一級時隱藏右側(cè)箭頭

當(dāng)點(diǎn)擊到最后一級時，將當(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ī)號了，分別再判斷每個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框會禁用）

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

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

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

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前文章：wex5實(shí)戰(zhàn)之管理收貨地址（二）-創(chuàng)新互聯(lián)
本文路徑：http://bm7419.com/article8/dgdpop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站營銷、Google、響應(yīng)式網(wǎng)站、小程序開發(fā)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)