java+city-picker自定义省市区选择
来源:互联网 发布:伯乐在线 人工智能 编辑:程序博客网 时间:2024/05/20 01:45
运用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>加上标签 data-toggle="city-picker"
<div data-toggle="city-picker"> <input readonly type="text" data-toggle="city-picker" ></div>这样一个全国省份的省市区选择demo就做好了
原理是通过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就能自定义省市区三级联动了
0 0
- java+city-picker自定义省市区选择
- 省市区三级联动city-picker
- city-picker
- city-picker的简单使用
- 自定义组合控件之省市区三级联动选择
- city-picker根据县区代码初始化
- picker自定义高度
- 微信小程序学习:使用picker封装省市区三级联动模板
- 关于jQuery的city-picker插件的使用
- 自定义texttreeview绑定省市区
- django自定义Color Picker控件
- C# JavaScript自定义控件,省市区三级联动选择,动态加载数据
- android 省市区选择三级联动
- Bootstrap的日期选择插件DateTime Picker
- Picker
- 自定义 省市区三级联动 效果
- java 省市区数据data
- React-Native省市区三级联动react-native-roll-picker 抽屉react-native-pan-drawer
- android studio 识别不到 genymotion device
- 可以高亮显示关键字并设置不同字体大小的自定义TextView
- the executable was signed with invalid entitlements
- ubuntu10.10下安装jdk7
- 论windows装gensim的艰辛历程
- java+city-picker自定义省市区选择
- 2016 年最受欢迎的编程语言是什么?
- centos7下使用yum安装mysql
- struts2学习
- Java Native Interface
- Android应用市场发布
- 排序
- missing required architecture i386 in file错误解决
- oralce基础--转载