运用city-picker创建省市区选择。
这里直接附上city-picker的地址http://tshi0912.github.io/city-picker/
方法
导入js文件
- <script src="/jquery.js"></script><!-- jQuery is required -->
- <script src="/city-picker.data.js"></script>
- <script src="/city-picker.js"></script>
- <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就能自定义省市区三级联动了