XML 調整
上一篇文章的 XML 資料來源要加上一些細項資料:<?xml version="1.0" encoding="utf-8" ?> <zip> <city name="基隆市"> <area name="仁愛區" zipcode="200"></area> <area name="信義區" zipcode="201"></area> <area name="中正區" zipcode="202"></area> <area name="中山區" zipcode="203"></area> <area name="安樂區" zipcode="204"></area> <area name="暖暖區" zipcode="205"></area> <area name="七堵區" zipcode="206"></area> </city> <city name="台北市"> <area name="中正區" zipcode="100"></area> <area name="大同區" zipcode="103"></area> <area name="中山區" zipcode="104"></area> <area name="松山區" zipcode="105"></area> <area name="大安區" zipcode="106"></area> <area name="萬華區" zipcode="108"></area> <area name="信義區" zipcode="110"></area> <area name="士林區" zipcode="111"></area> <area name="北投區" zipcode="112"></area> <area name="內湖區" zipcode="114"></area> <area name="南港區" zipcode="115"></area> <area name="文山區" zipcode="116"></area> </city> <city name="新北市"> <area name="萬里區" zipcode="207"></area> <area name="金山區" zipcode="208"></area> <area name="板橋區" zipcode="220"></area> <area name="汐止區" zipcode="221"></area> <area name="深坑區" zipcode="222"></area> <area name="石碇區" zipcode="223"></area> <area name="瑞芳區" zipcode="224"></area> <area name="平溪區" zipcode="226"></area> <area name="雙溪區" zipcode="227"></area> <area name="貢寮區" zipcode="228"></area> <area name="新店區" zipcode="231"></area> <area name="坪林區" zipcode="232"></area> <area name="烏來區" zipcode="233"></area> <area name="永和區" zipcode="234"></area> <area name="中和區" zipcode="235"></area> <area name="土城區" zipcode="236"></area> <area name="三峽區" zipcode="237"></area> <area name="樹林區" zipcode="238"></area> <area name="鶯歌區" zipcode="239"></area> <area name="三重區" zipcode="241"></area> <area name="新莊區" zipcode="242"></area> <area name="泰山區" zipcode="243"></area> <area name="林口區" zipcode="244"></area> <area name="蘆洲區" zipcode="247"></area> <area name="五股區" zipcode="248"></area> <area name="八里區" zipcode="249"></area> <area name="淡水區" zipcode="251"></area> <area name="三芝區" zipcode="252"></area> <area name="石門區" zipcode="253"></area> </city> <city name="桃園縣"> <area name="中壢市" zipcode="320"></area> <area name="平鎮市" zipcode="324"></area> <area name="龍潭鄉" zipcode="325"></area> <area name="楊梅市" zipcode="326"></area> <area name="新屋鄉" zipcode="327"></area> <area name="觀音鄉" zipcode="328"></area> <area name="桃園市" zipcode="330"></area> <area name="龜山鄉" zipcode="333"></area> <area name="八德市" zipcode="334"></area> <area name="大溪鎮" zipcode="335"></area> <area name="復興鄉" zipcode="336"></area> <area name="大園鄉" zipcode="337"></area> <area name="蘆竹鄉" zipcode="338"></area> </city> <city name="新竹市"> <area name="東區" zipcode="300"></area> <area name="北區" zipcode="300"></area> <area name="香山區" zipcode="300"></area> </city> <city name="新竹縣"> <area name="竹北市" zipcode="302"></area> <area name="湖口鄉" zipcode="303"></area> <area name="新豐鄉" zipcode="304"></area> <area name="新埔鎮" zipcode="305"></area> <area name="關西鎮" zipcode="306"></area> <area name="芎林鄉" zipcode="307"></area> <area name="寶山鄉" zipcode="308"></area> <area name="竹東鎮" zipcode="310"></area> <area name="五峰鄉" zipcode="311"></area> <area name="橫山鄉" zipcode="312"></area> <area name="尖石鄉" zipcode="313"></area> <area name="北埔鄉" zipcode="314"></area> <area name="峨眉鄉" zipcode="315"></area> </city> <city name="苗栗縣"> <area name="竹南鎮" zipcode="350"></area> <area name="頭份鎮" zipcode="351"></area> <area name="三灣鄉" zipcode="352"></area> <area name="南庄鄉" zipcode="353"></area> <area name="獅潭鄉" zipcode="354"></area> <area name="後龍鎮" zipcode="356"></area> <area name="通霄鎮" zipcode="357"></area> <area name="苑裡鎮" zipcode="358"></area> <area name="苗栗市" zipcode="360"></area> <area name="造橋鄉" zipcode="361"></area> <area name="頭屋鄉" zipcode="362"></area> <area name="公館鄉" zipcode="363"></area> <area name="大湖鄉" zipcode="364"></area> <area name="泰安鄉" zipcode="365"></area> <area name="銅鑼鄉" zipcode="366"></area> <area name="三義鄉" zipcode="367"></area> <area name="西湖鄉" zipcode="368"></area> <area name="卓蘭鎮" zipcode="369"></area> </city> <city name="台中市"> <area name="中區" zipcode="400"></area> <area name="東區" zipcode="401"></area> <area name="南區" zipcode="402"></area> <area name="西區" zipcode="403"></area> <area name="北區" zipcode="404"></area> <area name="北屯區" zipcode="406"></area> <area name="西屯區" zipcode="407"></area> <area name="南屯區" zipcode="408"></area> <area name="太平區" zipcode="411"></area> <area name="大里區" zipcode="412"></area> <area name="霧峰區" zipcode="413"></area> <area name="烏日區" zipcode="414"></area> <area name="豐原區" zipcode="420"></area> <area name="后里區" zipcode="421"></area> <area name="石岡區" zipcode="422"></area> <area name="東勢區" zipcode="423"></area> <area name="和平區" zipcode="424"></area> <area name="新社區" zipcode="426"></area> <area name="潭子區" zipcode="427"></area> <area name="大雅區" zipcode="428"></area> <area name="神岡區" zipcode="429"></area> <area name="大肚區" zipcode="432"></area> <area name="沙鹿區" zipcode="433"></area> <area name="龍井區" zipcode="434"></area> <area name="梧棲區" zipcode="435"></area> <area name="清水區" zipcode="436"></area> <area name="大甲區" zipcode="437"></area> <area name="外埔區" zipcode="438"></area> <area name="大安區" zipcode="439"></area> </city> <city name="彰化縣"> <area name="彰化市" zipcode="500"></area> <area name="芬園鄉" zipcode="502"></area> <area name="花壇鄉" zipcode="503"></area> <area name="秀水鄉" zipcode="504"></area> <area name="鹿港鎮" zipcode="505"></area> <area name="福興鄉" zipcode="506"></area> <area name="線西鄉" zipcode="507"></area> <area name="和美鎮" zipcode="508"></area> <area name="伸港鄉" zipcode="509"></area> <area name="員林鎮" zipcode="510"></area> <area name="社頭鄉" zipcode="511"></area> <area name="永靖鄉" zipcode="512"></area> <area name="埔心鄉" zipcode="513"></area> <area name="溪湖鎮" zipcode="514"></area> <area name="大村鄉" zipcode="515"></area> <area name="埔鹽鄉" zipcode="516"></area> <area name="田中鎮" zipcode="520"></area> <area name="北斗鎮" zipcode="521"></area> <area name="田尾鄉" zipcode="522"></area> <area name="埤頭鄉" zipcode="523"></area> <area name="溪州鄉" zipcode="524"></area> <area name="竹塘鄉" zipcode="525"></area> <area name="二林鎮" zipcode="526"></area> <area name="大城鄉" zipcode="527"></area> <area name="芳苑鄉" zipcode="528"></area> <area name="二水鄉" zipcode="530"></area> </city> <city name="南投縣"> <area name="南投市" zipcode="540"></area> <area name="中寮鄉" zipcode="541"></area> <area name="草屯鎮" zipcode="542"></area> <area name="國姓鄉" zipcode="544"></area> <area name="埔里鎮" zipcode="545"></area> <area name="仁愛鄉" zipcode="546"></area> <area name="名間鄉" zipcode="551"></area> <area name="集集鎮" zipcode="552"></area> <area name="水里鄉" zipcode="553"></area> <area name="魚池鄉" zipcode="555"></area> <area name="信義鄉" zipcode="556"></area> <area name="竹山鎮" zipcode="557"></area> <area name="鹿谷鄉" zipcode="558"></area> </city> <city name="雲林縣"> <area name="斗南鎮" zipcode="630"></area> <area name="大埤鄉" zipcode="631"></area> <area name="虎尾鎮" zipcode="632"></area> <area name="土庫鎮" zipcode="633"></area> <area name="褒忠鄉" zipcode="634"></area> <area name="東勢鄉" zipcode="635"></area> <area name="台西鄉" zipcode="636"></area> <area name="崙背鄉" zipcode="637"></area> <area name="麥寮鄉" zipcode="638"></area> <area name="斗六市" zipcode="640"></area> <area name="林內鄉" zipcode="643"></area> <area name="古坑鄉" zipcode="646"></area> <area name="莿桐鄉" zipcode="647"></area> <area name="西螺鎮" zipcode="648"></area> <area name="二崙鄉" zipcode="649"></area> <area name="北港鎮" zipcode="651"></area> <area name="水林鄉" zipcode="652"></area> <area name="口湖鄉" zipcode="653"></area> <area name="四湖鄉" zipcode="654"></area> <area name="元長鄉" zipcode="655"></area> </city> <city name="嘉義市"> <area name="東區" zipcode="600"></area> <area name="西區" zipcode="600"></area> </city> <city name="嘉義縣"> <area name="番路鄉" zipcode="602"></area> <area name="梅山鄉" zipcode="603"></area> <area name="竹崎鄉" zipcode="604"></area> <area name="阿里山鄉" zipcode="605"></area> <area name="中埔鄉" zipcode="606"></area> <area name="大埔鄉" zipcode="607"></area> <area name="水上鄉" zipcode="608"></area> <area name="鹿草鄉" zipcode="611"></area> <area name="太保市" zipcode="612"></area> <area name="朴子市" zipcode="613"></area> <area name="東石鄉" zipcode="614"></area> <area name="六腳鄉" zipcode="615"></area> <area name="新港鄉" zipcode="616"></area> <area name="民雄鄉" zipcode="621"></area> <area name="大林鎮" zipcode="622"></area> <area name="溪口鄉" zipcode="623"></area> <area name="義竹鄉" zipcode="624"></area> <area name="布袋鎮" zipcode="625"></area> </city> <city name="台南市"> <area name="中西區" zipcode="700"></area> <area name="東區" zipcode="701"></area> <area name="南區" zipcode="702"></area> <area name="北區" zipcode="704"></area> <area name="安平區" zipcode="708"></area> <area name="安南區" zipcode="709"></area> <area name="永康區" zipcode="710"></area> <area name="歸仁區" zipcode="711"></area> <area name="新化區" zipcode="712"></area> <area name="左鎮區" zipcode="713"></area> <area name="玉井區" zipcode="714"></area> <area name="楠西區" zipcode="715"></area> <area name="南化區" zipcode="716"></area> <area name="仁德區" zipcode="717"></area> <area name="關廟區" zipcode="718"></area> <area name="龍崎區" zipcode="719"></area> <area name="官田區" zipcode="720"></area> <area name="麻豆區" zipcode="721"></area> <area name="佳里區" zipcode="722"></area> <area name="西港區" zipcode="723"></area> <area name="七股區" zipcode="724"></area> <area name="將軍區" zipcode="725"></area> <area name="學甲區" zipcode="726"></area> <area name="北門區" zipcode="727"></area> <area name="新營區" zipcode="730"></area> <area name="後壁區" zipcode="731"></area> <area name="白河區" zipcode="732"></area> <area name="東山區" zipcode="733"></area> <area name="六甲區" zipcode="734"></area> <area name="下營區" zipcode="735"></area> <area name="柳營區" zipcode="736"></area> <area name="鹽水區" zipcode="737"></area> <area name="善化區" zipcode="741"></area> <area name="大內區" zipcode="742"></area> <area name="山上區" zipcode="743"></area> <area name="新市區" zipcode="744"></area> <area name="安定區" zipcode="745"></area> </city> <city name="高雄市"> <area name="新興區" zipcode="800"></area> <area name="前金區" zipcode="801"></area> <area name="苓雅區" zipcode="802"></area> <area name="鹽埕區" zipcode="803"></area> <area name="鼓山區" zipcode="804"></area> <area name="旗津區" zipcode="805"></area> <area name="前鎮區" zipcode="806"></area> <area name="三民區" zipcode="807"></area> <area name="楠梓區" zipcode="811"></area> <area name="小港區" zipcode="812"></area> <area name="左營區" zipcode="813"></area> <area name="仁武區" zipcode="814"></area> <area name="大社區" zipcode="815"></area> <area name="岡山區" zipcode="820"></area> <area name="路竹區" zipcode="821"></area> <area name="阿蓮區" zipcode="822"></area> <area name="田寮區" zipcode="823"></area> <area name="燕巢區" zipcode="824"></area> <area name="橋頭區" zipcode="825"></area> <area name="梓官區" zipcode="826"></area> <area name="彌陀區" zipcode="827"></area> <area name="永安區" zipcode="828"></area> <area name="湖內區" zipcode="829"></area> <area name="鳳山區" zipcode="830"></area> <area name="大寮區" zipcode="831"></area> <area name="林園區" zipcode="832"></area> <area name="鳥松區" zipcode="833"></area> <area name="大樹區" zipcode="840"></area> <area name="旗山區" zipcode="842"></area> <area name="美濃區" zipcode="843"></area> <area name="六龜區" zipcode="844"></area> <area name="內門區" zipcode="845"></area> <area name="杉林區" zipcode="846"></area> <area name="甲仙區" zipcode="847"></area> <area name="桃源區" zipcode="848"></area> <area name="那瑪夏區" zipcode="849"></area> <area name="茂林區" zipcode="851"></area> <area name="茄萣區" zipcode="852"></area> </city> <city name="屏東縣"> <area name="屏東市" zipcode="900"></area> <area name="三地門鄉" zipcode="901"></area> <area name="霧台鄉" zipcode="902"></area> <area name="瑪家鄉" zipcode="903"></area> <area name="九如鄉" zipcode="904"></area> <area name="里港鄉" zipcode="905"></area> <area name="高樹鄉" zipcode="906"></area> <area name="鹽埔鄉" zipcode="907"></area> <area name="長治鄉" zipcode="908"></area> <area name="麟洛鄉" zipcode="909"></area> <area name="竹田鄉" zipcode="911"></area> <area name="內埔鄉" zipcode="912"></area> <area name="萬丹鄉" zipcode="913"></area> <area name="潮州鎮" zipcode="920"></area> <area name="泰武鄉" zipcode="921"></area> <area name="來義鄉" zipcode="922"></area> <area name="萬巒鄉" zipcode="923"></area> <area name="崁頂鄉" zipcode="924"></area> <area name="新埤鄉" zipcode="925"></area> <area name="南州鄉" zipcode="926"></area> <area name="林邊鄉" zipcode="927"></area> <area name="東港鎮" zipcode="928"></area> <area name="琉球鄉" zipcode="929"></area> <area name="佳冬鄉" zipcode="931"></area> <area name="新園鄉" zipcode="932"></area> <area name="枋寮鄉" zipcode="940"></area> <area name="枋山鄉" zipcode="941"></area> <area name="春日鄉" zipcode="942"></area> <area name="獅子鄉" zipcode="943"></area> <area name="車城鄉" zipcode="944"></area> <area name="牡丹鄉" zipcode="945"></area> <area name="恆春鎮" zipcode="946"></area> <area name="滿州鄉" zipcode="947"></area> </city> <city name="台東縣"> <area name="台東市" zipcode="950"></area> <area name="綠島鄉" zipcode="951"></area> <area name="蘭嶼鄉" zipcode="952"></area> <area name="延平鄉" zipcode="953"></area> <area name="卑南鄉" zipcode="954"></area> <area name="鹿野鄉" zipcode="955"></area> <area name="關山鎮" zipcode="956"></area> <area name="海端鄉" zipcode="957"></area> <area name="池上鄉" zipcode="958"></area> <area name="東河鄉" zipcode="959"></area> <area name="成功鎮" zipcode="961"></area> <area name="長濱鄉" zipcode="962"></area> <area name="太麻里鄉" zipcode="963"></area> <area name="金峰鄉" zipcode="964"></area> <area name="大武鄉" zipcode="965"></area> <area name="達仁鄉" zipcode="966"></area> </city> <city name="花蓮縣"> <area name="花蓮市" zipcode="970"></area> <area name="新城鄉" zipcode="971"></area> <area name="秀林鄉" zipcode="972"></area> <area name="吉安鄉" zipcode="973"></area> <area name="壽豐鄉" zipcode="974"></area> <area name="鳳林鎮" zipcode="975"></area> <area name="光復鄉" zipcode="976"></area> <area name="豐濱鄉" zipcode="977"></area> <area name="瑞穗鄉" zipcode="978"></area> <area name="萬榮鄉" zipcode="979"></area> <area name="玉里鎮" zipcode="981"></area> <area name="卓溪鄉" zipcode="982"></area> </city> <city name="宜蘭縣"> <area name="宜蘭市" zipcode="260"></area> <area name="頭城鎮" zipcode="261"></area> <area name="礁溪鄉" zipcode="262"></area> <area name="壯圍鄉" zipcode="263"></area> <area name="員山鄉" zipcode="264"></area> <area name="羅東鎮" zipcode="265"></area> <area name="三星鄉" zipcode="266"></area> <area name="大同鄉" zipcode="267"></area> <area name="五結鄉" zipcode="268"></area> <area name="冬山鄉" zipcode="269"></area> <area name="蘇澳鎮" zipcode="270"></area> <area name="南澳鄉" zipcode="272"></area> </city> <city name="澎湖縣"> <area name="馬公市" zipcode="880"></area> <area name="西嶼鄉" zipcode="881"></area> <area name="望安鄉" zipcode="882"></area> <area name="七美鄉" zipcode="883"></area> <area name="白沙鄉" zipcode="884"></area> <area name="湖西鄉" zipcode="885"></area> </city> <city name="金門縣"> <area name="金沙鎮" zipcode="890"></area> <area name="金湖鎮" zipcode="891"></area> <area name="金寧鄉" zipcode="892"></area> <area name="金城鎮" zipcode="893"></area> <area name="烈嶼鄉" zipcode="894"></area> <area name="烏坵鄉" zipcode="896"></area> </city> <city name="連江縣"> <area name="南竿鄉" zipcode="209"></area> <area name="北竿鄉" zipcode="210"></area> <area name="莒光鄉" zipcode="211"></area> <area name="東引鄉" zipcode="212"></area> </city> </zip>
先將來源資料讀取成 array 的函式調整一下:
var a_zip = []; $.ajax({ url: 'http://localhost:8090/Content/xml/zipcode.xml', dataType: 'xml', error: function () { alert('失敗'); }, success: function (xml) { var cityIndex = 0; $(xml).find('city').each(function () { var city_name = $(this).attr('name'); var t_area = []; var areaIndex = 0; /* 讀取 city 下 area 資料 */ $(this).find('area').each(function () { var area_name = $(this).attr('name'); var area_zipcode = $(this).attr('zipcode'); t_area[areaIndex] = { area_name: area_name, area_zipcode: area_zipcode }; areaIndex ++; }); a_zip[cityIndex] = { city_name: city_name, index: cityIndex, /* 將 area 資料放在此 */ area: t_area }; cityIndex++; }); init(); } });
介面
在顯示介面上,我將它改為三格,分別顯示郵遞區號、城市、地區<input id="targetZipCode" style="width: 35px;" type="text" /> <input id="targetCity" style="width: 60px;" type="text" /> <input id="targetArea" style="width: 60px;" type="text" /> <span id="targetButton"></span>
Button
此處在修改時必須多設置一個變數 subWindowIsDisplay,判斷子視窗是否在顯示情況。在按鈕的 mouseover 事件中,母視窗在顯示時機必須多判斷 subWindowIsDisplay 這個變數,所以整個 Button 的程式碼如下
var subWindowIsDisplay = false; var button = Ext.create('Ext.Button', { text: '選擇縣市', renderTo: 'targetButton', listeners: { mouseover: { fn: function () { if (!this.mousedOver) { buttonIsDisplay = true; var tempSelf = this; var tempPosition = tempSelf.getPosition(); // X 軸位置 tempPosition[0] += 100; // Y 軸位置 tempPosition[1] -= 50; locationWinF.setPosition(tempPosition); locationWinF.show(); } }, // delay: 2000 }, mouseout: { fn: function () { buttonIsDisplay = false; if (!buttonIsDisplay && !windowIsDisplay && !subWindowIsDisplay) { locationWinS.hide(); locationWinF.hide(); } }, delay: 500 }, } });
windows
在 Windows 的 mouseleave 事件也要稍微做修改listeners: { afterrender: function(win) { win.mon(win.el, { mouseover: { fn: function () { if (!this.mousedOver) { windowIsDisplay = true; locationWinF.show(); } } }, mouseleave: { fn: function () { windowIsDisplay = false; if (!buttonIsDisplay && !windowIsDisplay && !subWindowIsDisplay) { locationWinF.hide(); locationWinS.hide(); } }, delay: 500 } }); } },
Windows 針對每一個選項都設置一個 mouseover 的事件,當滑鼠移到選項上,就必須帶出該城市下的地區,剛剛上面程式碼已經有將此轉換成物件了,在 a_zip[tIndex].area 下, locationWinS 為子視窗物件、townMenu 為城市控制項 ID,稍後會提到。
items: [ { id: 'taiwanCity', xtype: 'checkboxgroup', fieldLabel: '台灣地區', labelAlign: 'top', columns: 4, vertical: true, defaults: { width: 150, listeners: { afterrender: function () { var tempSelf = this; tempSelf.getEl().on('mouseout', function () { if (!tempSelf.checked) { tempSelf.getEl().setStyle('background-color', '') } }); tempSelf.getEl().on('mouseover', function () { tempSelf.getEl().setStyle('background-color', 'cornflowerblue') var tempPosition = tempSelf.getPosition(); clearTimeout(colock); colock = setTimeout(function () { if (cityValue != tempSelf.inputValue) { tempPosition[0] += 100; tempPosition[1] -= 50; locationWinS.setPosition(tempPosition); cityValue = tempSelf.inputValue; var tIndex = cityValue; Ext.getCmp('townMenu').removeAll(); for (var i = 0; i < a_zip[tIndex].area.length; i++) { Ext.getCmp('townMenu').add({ boxLabel: a_zip[tIndex].area[i].area_name, name: 'TownId', inputValue: i }) } } locationWinS.show(); }, 100) }); } } } } ]
sub windows
子視窗要做的事情就是在選項被點擊後,將資料帶到文字欄位內。var locationWinS = Ext.create('widget.window', { header: false, style: { borderStyle: 'none', }, closable: false, closeAction: 'hide', items: [ { padding: '10 25 10 25', border: false, items: [ { id: 'townMenu', xtype: 'checkboxgroup', columns: 2, vertical: true, defaults: { width: 110, listeners: { afterrender: function () { var tempSelf = this; tempSelf.getEl().on('mouseout', function () { if (!tempSelf.checked) { tempSelf.getEl().setStyle('background-color', '') } }); tempSelf.getEl().on('mouseleave', function () { subWindowIsDisplay = false; }); tempSelf.getEl().on('mouseover', function () { tempSelf.getEl().setStyle('background-color', 'cornflowerblue') subWindowIsDisplay = true; }, 500); this.getEl().on('click', function () { $('#targetZipCode').val( a_zip[cityValue].area[tempSelf.inputValue].area_zipcode ); $('#targetCity').val(a_zip[cityValue].city_name); $('#targetArea').val(a_zip[cityValue].area[tempSelf.inputValue].area_name); cityValue = -1; locationWinF.hide(); locationWinS.hide(); }); } } } } ] } ] });
最後執行後畫面如下
沒有留言 :
張貼留言