1.citypicker用法

citypicker用法

       导入js文件

       [html] view plain copy

       <script src="/jquery.js"></script><!-- jQuery is required -->  

       <script src="/city-picker.data.js"></script>  

       <script src="/city-picker.js"></script>  

       [html] view plain copy

       <div data-toggle="city-picker">  

       <input readonly type="text" data-toggle="city-picker" >  

       </div>  

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

       [javascript] view plain copy

       <span style="white-space:pre">    </span>: {   

       'A-G': [  

       { code: '',源码虎年ui扫雷源码 address: '安徽省'},  

       { code: '', address: '北京市'},  

       { code: '', address: '重庆市'},  

       { code: '', address: '福建省'},  

       { code: '', address: '甘肃省'},  

       { code: '', address: '广东省'},  

       { code: '', address: '广西壮族自治区'},  

       { code: '', address: '贵州省'}],  

       'H-K': [  

       { code: '', address: '海南省'},  

       { code: '', address: '河北省'},  

       { code: '', address: '黑龙江省'},  

       { code: '', address: '河南省'},  

       { code: '', address: '湖北省'},  

       { code: '', address: '湖南省'},  

       { code: '', address: '江苏省'},  

       { code: '', address: '江西省'},  

       { code: '', address: '吉林省'}],  

       'L-S': [  

       { code: '', address: '辽宁省'},  

       { code: '', address: '内蒙古自治区'},  

       { code: '', address: '宁夏回族自治区'},  

       { code: '', address: '青海省'},  

       { code: '', address: '山东省'},  

       { code: '', address: '上海市'},  

       { code: '', address: '山西省'},  

       { code: '', address: '陕西省'},  

       { code: '', address: '四川省'}],  

       'T-Z': [  

       { code: '', address: '天津市'},  

       { code: '', address: '新疆维吾尔自治区'},  

       { code: '', address: '西藏自治区'},  

       { code: '', address: '云南省'},  

       { code: '', address: '浙江省'}]  

       },  

       : {   

       : '北京市',  

       },  

       : {   

       : '东城区',  

       : '西城区',  

       : '朝阳区',  

       : '丰台区',  

       : '石景山区',  

       : '海淀区',  

       : '门头沟区',  

       : '房山区',  

       : '通州区',  

       : '顺义区',  

       : '昌平区',  

       : '大兴区',  

       : '怀柔区',  

       : '平谷区',  

       : '密云县',  

       : '延庆县'  

       },  

       : {   

       : '天津市'  

       },  

       : {   

       : '和平区',  

       : '河东区',  

       : '河西区',  

       : '南开区',  

       : '河北区',  

       : '红桥区',  

       : '东丽区',  

       : '西青区',  

       : '津南区',  

       : '北辰区',  

       : '武清区',  

       : '宝坻区',  

       : '滨海新区',  

       : '宁河县',  

       : '静海县',  

       : '蓟县'  

       },  

       : {   

       : '石家庄市',  

       : '唐山市',  

       : '秦皇岛市',  

       : '邯郸市',  

       : '邢台市',  

       : '保定市',  

       : '张家口市',  

       : '承德市',  

       : '沧州市',  

       : '廊坊市',  

       : '衡水市'  

       },  

       观察js结构可以得到这里面都是源码小米共享WiFi改源码一些树形结构

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

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

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

       先附上代码：

       [java] view plain copy

       <span style="white-space:pre">            </span>// 增加省份  

       PageData tempPd = new PageData();  

       List<PageData> provinces = ordersService.listAllProvince(pd);//获取所有的省份  

       tempPd.put("中国", provinces);  

       data.put("", 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就能自定义省市区三级联动了