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

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

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

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獲取當前id數(shù)據(jù)返回data組件

addressData.loadData(data.areaItem);

addressData.first();//若數(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("手機號碼有誤，請重新輸入");

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

}

};

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

//選擇省市

Model.prototype.chooseAddressClick = function(event){

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

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

};

3、tree使用

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

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":"中關村","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"
			}
		]
	}

]}

設置選擇最后一級時隱藏右側箭頭

當點擊到最后一級時，將當前id，名稱返回到新增地址頁面

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

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

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

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

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、點擊保存按鈕保存到數(shù)據(jù)庫并返回管理地址頁面

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

if(name == ""){

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

return;

}else if(phone == ""){

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

return;

}else if(city_address == ""){

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

return;

}else if(address == ""){

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

return;

}

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

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

if(data.returnFlag == 100){

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

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

justep.Shell.showPage(url);

}

})

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

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

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

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

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

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

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

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

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

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

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

廣告

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