java+city-picker自定义省市区选择

运用city-picker创建省市区选择。

这里直接附上city-picker的地址http://tshi0912.github.io/city-picker/

方法

导入js文件

[html]  view plain  copy

1. <script src="/jquery.js"></script><!-- jQuery is required -->  
2. <script src="/city-picker.data.js"></script>  
3. <script src="/city-picker.js"></script>  

加上标签 data-toggle="city-picker"

[html]  view plain  copy

1. <div data-toggle="city-picker">  
2.    <input readonly type="text" data-toggle="city-picker" >  
3. </div>  

这样一个全国省份的省市区选择demo就做好了

原理是通过js调取city-picker.data.js里面的json数据。然后展示输入，json格式如图

[javascript]  view plain  copy

1. <span style="white-space:pre">    </span>86: {  
2.                 'A-G': [  
3.                     {code: '340000', address: '安徽省'},  
4.                     {code: '110000', address: '北京市'},  
5.                     {code: '500000', address: '重庆市'},  
6.                     {code: '350000', address: '福建省'},  
7.                     {code: '620000', address: '甘肃省'},  
8.                     {code: '440000', address: '广东省'},  
9.                     {code: '450000', address: '广西壮族自治区'},  
10.                     {code: '520000', address: '贵州省'}],  
11.                 'H-K': [  
12.                     {code: '460000', address: '海南省'},  
13.                     {code: '130000', address: '河北省'},  
14.                     {code: '230000', address: '黑龙江省'},  
15.                     {code: '410000', address: '河南省'},  
16.                     {code: '420000', address: '湖北省'},  
17.                     {code: '430000', address: '湖南省'},  
18.                     {code: '320000', address: '江苏省'},  
19.                     {code: '360000', address: '江西省'},  
20.                     {code: '220000', address: '吉林省'}],  
21.                 'L-S': [  
22.                     {code: '210000', address: '辽宁省'},  
23.                     {code: '150000', address: '内蒙古自治区'},  
24.                     {code: '640000', address: '宁夏回族自治区'},  
25.                     {code: '630000', address: '青海省'},  
26.                     {code: '370000', address: '山东省'},  
27.                     {code: '310000', address: '上海市'},  
28.                     {code: '140000', address: '山西省'},  
29.                     {code: '610000', address: '陕西省'},  
30.                     {code: '510000', address: '四川省'}],  
31.                 'T-Z': [  
32.                     {code: '120000', address: '天津市'},  
33.                     {code: '650000', address: '新疆维吾尔自治区'},  
34.                     {code: '540000', address: '西藏自治区'},  
35.                     {code: '530000', address: '云南省'},  
36.                     {code: '330000', address: '浙江省'}]  
37.             },  
38.             110000: {  
39.                 110100: '北京市',  
40.             },  
41.             110100: {  
42.                 110101: '东城区',  
43.                 110102: '西城区',  
44.                 110105: '朝阳区',  
45.                 110106: '丰台区',  
46.                 110107: '石景山区',  
47.                 110108: '海淀区',  
48.                 110109: '门头沟区',  
49.                 110111: '房山区',  
50.                 110112: '通州区',  
51.                 110113: '顺义区',  
52.                 110114: '昌平区',  
53.                 110115: '大兴区',  
54.                 110116: '怀柔区',  
55.                 110117: '平谷区',  
56.                 110228: '密云县',  
57.                 110229: '延庆县'  
58.             },  
59.             120000: {  
60.                 120100: '天津市'  
61.             },  
62.             120100: {  
63.                 120101: '和平区',  
64.                 120102: '河东区',  
65.                 120103: '河西区',  
66.                 120104: '南开区',  
67.                 120105: '河北区',  
68.                 120106: '红桥区',  
69.                 120110: '东丽区',  
70.                 120111: '西青区',  
71.                 120112: '津南区',  
72.                 120113: '北辰区',  
73.                 120114: '武清区',  
74.                 120115: '宝坻区',  
75.                 120116: '滨海新区',  
76.                 120221: '宁河县',  
77.                 120223: '静海县',  
78.                 120225: '蓟县'  
79.             },  
80.             130000: {  
81.                 130100: '石家庄市',  
82.                 130200: '唐山市',  
83.                 130300: '秦皇岛市',  
84.                 130400: '邯郸市',  
85.                 130500: '邢台市',  
86.                 130600: '保定市',  
87.                 130700: '张家口市',  
88.                 130800: '承德市',  
89.                 130900: '沧州市',  
90.                 131000: '廊坊市',  
91.                 131100: '衡水市'  
92.             },  

还有很多很多。这是全国的，但是如何从自己数据库自定义数据给前端呢。
观察js结构可以得到这里面都是一些树形结构

86:{}里面第一层是选择第二层是省份代码

跟86同层的都是省市的树形结构和市区的树形结构。

这样我们可以从数据库中找出我们需要显示的省市区数据给city-picker

先附上代码：

[java]  view plain  copy

1. <span style="white-space:pre">            </span>// 增加省份  
2.             PageData tempPd = new PageData();  
3.             List<PageData> provinces = ordersService.listAllProvince(pd);//获取所有的省份  
4.             tempPd.put("中国", provinces);  
5.             data.put("86", tempPd);  
6.             // 增加城市  
7.             List<PageData> citys = ordersService.listAllCity(pd);//获取所有的城市和省份  
8.             Map<String, Object> provinceMap = new HashMap<>();  
9.             for (PageData index : citys) {  
10.                 if (provinceMap.get(index.getString("province_Code")) == null) {  
11.                     Map<String, Object> cityMap = new HashMap<>();  
12.                     cityMap.put(index.getString("city_Code"), index.getString("city_Name"));  
13.                     provinceMap.put(index.getString("province_Code"), cityMap);  
14.                 } else {  
15.                     ((HashMap<String, Object>) provinceMap.get(index.getString("province_Code")))  
16.                             .put(index.getString("city_Code"), index.getString("city_Name"));  
17.                 }  
18.             }  
19.             data.putAll(provinceMap);  
20.             // 增加中心  
21.             List<PageData> centers = centerService.listAll(pd);//获取所有中心  
22.             Map<String, Object> centerMap = new HashMap<>();  
23.             for (PageData index : centers) {  
24.                 if (index.get("center_City") == null) {  
25.                     continue;  
26.                 }  
27.                 if (centerMap.get(index.getString("center_City")) == null) {  
28.                     Map<String, Object> center = new HashMap<>();  
29.                     center.put(String.valueOf(index.get("CENTER_ID")), index.getString("CENTER_MC"));  
30.                     centerMap.put(index.getString("center_City"), center);  
31.                 } else {  
32.                     ((HashMap<String, Object>) centerMap.get(index.get("center_City"))).put(String.valueOf(index.get("CENTER_ID")), index.getString("CENTER_MC"));  
33.                 }  
34.             }  
35.             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就能自定义省市区三级联动了