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>
加上标签 data-toggle="city-picker"[html] view plain copy
<div data-toggle="city-picker">
<input readonly type="text" data-toggle="city-picker" >
</div>
这样一个全国省份的源码省市区选择demo就做好了原理是通过js调取city-picker.data.js里面的json数据。然后展示输入，源码json格式如图
[javascript] view plain copy
<span style="white-space:pre"> </span>: {
'A-G': [
{ code: '',源码源码资本合伙人与联络互动 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结构可以得到这里面都是源码海绵宝宝flash源码一些树形结构
:{ }里面第一层是选择第二层是省份代码
跟同层的都是省市的树形结构和市区的树形结构。
这样我们可以从数据库中找出我们需要显示的源码省市区数据给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输出到前端，源码然后前端用给出的源码html用户列表源码json数据显示city-pick就能自定义省市区三级联动了
