citypicker用法

发布网友发布时间：2022-04-30 15:57

我来回答

共1个回答

热心网友时间：2022-06-26 21:57

方法

导入js文件

[html] view plain copy

[html] view plain copy

</div>

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

[javascript] view plain copy

<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: '衡水市'

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

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

这样我们可以从数据库中找出我们需要显示的省市区数据给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("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就能自定义省市区*联动了