java+city-picker自定義省市區選擇
阿新 • • 發佈：2019-02-19
運用city-picker建立省市區選擇。
方法
匯入js檔案
<script src="/jquery.js"></script><!-- jQuery is required -->
<script src="/city-picker.data.js"></script>
<script src="/city-picker.js"></script>這樣一個全國省份的省市區選擇demo就做好了<div data-toggle="city-picker"> <input readonly type="text" data-toggle="city-picker" > </div>
原理是通過js調取city-picker.data.js裡面的json資料。然後展示輸入，json格式如圖
還有很多很多。這是全國的，但是如何從自己資料庫自定義資料給前端呢。<span style="white-space:pre"> </span>86: { 'A-G': [ {code: '340000', address: '安徽省'}, {code: '110000', address: '北京市'}, {code: '500000', address: '重慶市'}, {code: '350000', address: '福建省'}, {code: '620000', address: '甘肅省'}, {code: '440000', address: '廣東省'}, {code: '450000', address: '廣西壯族自治區'}, {code: '520000', address: '貴州省'}], 'H-K': [ {code: '460000', address: '海南省'}, {code: '130000', address: '河北省'}, {code: '230000', address: '黑龍江省'}, {code: '410000', address: '河南省'}, {code: '420000', address: '湖北省'}, {code: '430000', address: '湖南省'}, {code: '320000', address: '江蘇省'}, {code: '360000', address: '江西省'}, {code: '220000', address: '吉林省'}], 'L-S': [ {code: '210000', address: '遼寧省'}, {code: '150000', address: '內蒙古自治區'}, {code: '640000', address: '寧夏回族自治區'}, {code: '630000', address: '青海省'}, {code: '370000', address: '山東省'}, {code: '310000', address: '上海市'}, {code: '140000', address: '山西省'}, {code: '610000', address: '陝西省'}, {code: '510000', address: '四川省'}], 'T-Z': [ {code: '120000', address: '天津市'}, {code: '650000', address: '新疆維吾爾自治區'}, {code: '540000', address: '西藏自治區'}, {code: '530000', address: '雲南省'}, {code: '330000', address: '浙江省'}] }, 110000: { 110100: '北京市', }, 110100: { 110101: '東城區', 110102: '西城區', 110105: '朝陽區', 110106: '豐臺區', 110107: '石景山區', 110108: '海淀區', 110109: '門頭溝區', 110111: '房山區', 110112: '通州區', 110113: '順義區', 110114: '昌平區', 110115: '大興區', 110116: '懷柔區', 110117: '平谷區', 110228: '密雲縣', 110229: '延慶縣' }, 120000: { 120100: '天津市' }, 120100: { 120101: '和平區', 120102: '河東區', 120103: '河西區', 120104: '南開區', 120105: '河北區', 120106: '紅橋區', 120110: '東麗區', 120111: '西青區', 120112: '津南區', 120113: '北辰區', 120114: '武清區', 120115: '寶坻區', 120116: '濱海新區', 120221: '寧河縣', 120223: '靜海縣', 120225: '薊縣' }, 130000: { 130100: '石家莊市', 130200: '唐山市', 130300: '秦皇島市', 130400: '邯鄲市', 130500: '邢臺市', 130600: '保定市', 130700: '張家口市', 130800: '承德市', 130900: '滄州市', 131000: '廊坊市', 131100: '衡水市' },
觀察js結構可以得到這裡面都是一些樹形結構
86:{}裡面第一層是選擇第二層是省份程式碼
跟86同層的都是省市的樹形結構和市區的樹形結構。
這樣我們可以從資料庫中找出我們需要顯示的省市區資料給city-picker
先附上程式碼：
<span style="white-space:pre"> </span>// 增加省份 PageData tempPd = new PageData(); List<PageData> provinces = ordersService.listAllProvince(pd);//獲取所有的省份 tempPd.put("中國", provinces); data.put("86", tempPd); // 增加城市 List<PageData> citys = ordersService.listAllCity(pd);//獲取所有的城市和省份 Map<String, Object> provinceMap = new HashMap<>(); for (PageData index : citys) { if (provinceMap.get(index.getString("province_Code")) == null) { Map<String, Object> cityMap = new HashMap<>(); cityMap.put(index.getString("city_Code"), index.getString("city_Name")); provinceMap.put(index.getString("province_Code"), cityMap); } else { ((HashMap<String, Object>) provinceMap.get(index.getString("province_Code"))) .put(index.getString("city_Code"), index.getString("city_Name")); } } data.putAll(provinceMap); // 增加中心 List<PageData> centers = centerService.listAll(pd);//獲取所有中心 Map<String, Object> centerMap = new HashMap<>(); for (PageData index : centers) { if (index.get("center_City") == null) { continue; } if (centerMap.get(index.getString("center_City")) == null) { Map<String, Object> center = new HashMap<>(); center.put(String.valueOf(index.get("CENTER_ID")), index.getString("CENTER_MC")); centerMap.put(index.getString("center_City"), center); } else { ((HashMap<String, Object>) centerMap.get(index.get("center_City"))).put(String.valueOf(index.get("CENTER_ID")), index.getString("CENTER_MC")); } } data.putAll(centerMap);
這裡面的PageData是繼承的hashMap。獲取所有城市的時候連表查詢，查處城市所在省，欄位分別是province_Code,province_Name,city_Code,city_Name;
查詢中心（也就是區）的時候查詢中心所在城市，欄位分別是city_Code,city_Name,center_Name,center_Code.
把查出來的資料封裝成city-picker.data.js一樣格式資料後，轉成json輸出到前端，然後前端用給出的json資料顯示city-pick就能自定義省市區三級聯動了