省市区 - 三级联动通用化模块组件

本文涉及的产品
云数据库 Redis 版,社区版 2GB
推荐场景:
搭建游戏排行榜
简介: 都说我们要做模块化设计,而不要做功能化设计 什么是模块化设计,就是可插拔性高,组件化,想要就用,不要用拉倒,直接删除就行 什么是功能化设计,就是一个简单的功能,实现想要的效果,但是不够通用化,别人要用的话需要读懂你的代码,还需要复制黏贴很多代码这样效率不高   今天写了一个省市区三级联动的模...

都说我们要做模块化设计,而不要做功能化设计

什么是模块化设计,就是可插拔性高,组件化,想要就用,不要用拉倒,直接删除就行

什么是功能化设计,就是一个简单的功能,实现想要的效果,但是不够通用化,别人要用的话需要读懂你的代码,还需要复制黏贴很多代码这样效率不高

 

今天写了一个省市区三级联动的模块,写完后使用会非常方便,也很灵活

主要使用到的技术:jquery,redis,springMVC,MyBatis(springMVC和MyBatis无所谓,你用struts或者hibernate或者spring data都行)

首先页面引入js

1 <script src="/js/jquery-2.2.4.min.js"></script>
2 <script src="/cityselect/js/jquery.cityselect.js"></script>

HTML中写入3个div块,这是互斥的,div#id不同就可以做到模块化可插拔

 1 <div id="city"> 
 2         <select class="prov"></select>  
 3         <select class="city" disabled="disabled"></select> 
 4         <select class="dist" disabled="disabled"></select> 
 5     </div> 
 6     
 7     <div id="city2"> 
 8         <select class="prov"></select>  
 9         <select class="city" disabled="disabled"></select> 
10         <select class="dist" disabled="disabled"></select> 
11     </div> 
12     
13     <div id="city3"> 
14         <select class="prov"></select>  
15         <select class="city" disabled="disabled"></select> 
16         <select class="dist" disabled="disabled"></select> 
17     </div> 

初始化JS:

    <script type="text/javascript">
        /**
         * 
         * @Description: 省市区三级联动api
         * Copyright: Copyright (c) 2016
         * 
         * ==============================
         * 参数说明
         * url:省市数据josn文件路径
         * prov:默认省份
         * city:默认城市
         * dist:默认地区(县)
         * nodata:无数据状态
         * required:必选项
         * ==============================
         * 
         * @author leechenxiang
         * @date 2016年6月16日 下午3:46:58
         * @version V1.0
         */
        $(function(){
            $("#city").citySelect({
                prov:"江苏省",
                city:"无锡市",
                dist:"南长区",
                required:false
            }); 
            
            $("#city2").citySelect({
                nodata:"none",
                required:false
            }); 
            
            $("#city3").citySelect({
                nodata:"none",
                required:false
            }); 
            
        });
    </script>

后台controller:

 1 /**
 2      * 
 3      * @Description: 获取所有的省市区列表
 4      * @return
 5      * @throws Exception
 6      * 
 7      * @author leechenxiang
 8      * @date 2016年6月16日 上午11:22:10
 9      */
10     @RequestMapping("/getCities")
11     @ResponseBody
12     public CitiesDataResult getCities() throws Exception {
13         CitiesDataResult areas = commonService.getAllCities();
14         return areas;
15     }

service:

 1 @Override
 2     public CitiesDataResult getAllCities() {
 3         // 取出缓存
 4         try {
 5             String citiesDataResult = jedisClient.get(REDIS_CITIES_KEY);
 6             if (!StringUtils.isBlank(citiesDataResult)) {
 7                 CitiesDataResult redisResult = JsonUtils.jsonToPojo(citiesDataResult, CitiesDataResult.class);
 8                 return redisResult;
 9             }
10         } catch (Exception e1) {
11             e1.printStackTrace();
12         }
13         
14         List<AreaProvince> provinceList = areaProvinceMapper.getProvinceList();
15         List<Province> pList = new ArrayList<Province>();
16         for (AreaProvince province : provinceList) {
17             int provinceId = province.getProvinceId();
18             String provinceName = province.getProvinceName();
19             
20             List<AreaCity> cityList = areaProvinceMapper.getCityListBypId(provinceId);
21             List<City> cList = new ArrayList<City>();
22             for (AreaCity city : cityList) {
23                 int cityId = city.getCityId();
24                 String cityName = city.getCityName();
25                 
26                 List<District> districtList = areaProvinceMapper.getDistrictListBycId(cityId);
27                 
28                 City c = new City();
29                 c.setN(cityName);
30                 c.setA(districtList);
31                 cList.add(c);
32             }
33             
34             Province p = new Province(provinceName, cList);
35             pList.add(p);
36         }
37         
38         CitiesDataResult result = new CitiesDataResult();
39         result.setCitylist(pList);
40         
41         // 放入缓存
42         try {
43             jedisClient.set(REDIS_CITIES_KEY, JsonUtils.objectToJson(result));
44         } catch (Exception e) {
45             e.printStackTrace();
46         }
47         
48         return result;
49     }

如果需要默认选中那么只需要对这3个参数赋值即可:

prov:"江苏省",
city:"无锡市",
dist:"南长区",

对于省市区的数据源,可以存放在数据库表中,也可以直接存入js,作为一个json来调用即可

如果没有省市区可以淘一下万能的X宝,可以参考如下链接,真的是太强大了,把省市区直接细化到了极致:

省市区 数据库 脚本 excel

 

相关实践学习
基于Redis实现在线游戏积分排行榜
本场景将介绍如何基于Redis数据库实现在线游戏中的游戏玩家积分排行榜功能。
云数据库 Redis 版使用教程
云数据库Redis版是兼容Redis协议标准的、提供持久化的内存数据库服务,基于高可靠双机热备架构及可无缝扩展的集群架构,满足高读写性能场景及容量需弹性变配的业务需求。 产品详情:https://www.aliyun.com/product/kvstore &nbsp; &nbsp; ------------------------------------------------------------------------- 阿里云数据库体验:数据库上云实战 开发者云会免费提供一台带自建MySQL的源数据库&nbsp;ECS 实例和一台目标数据库&nbsp;RDS实例。跟着指引,您可以一步步实现将ECS自建数据库迁移到目标数据库RDS。 点击下方链接,领取免费ECS&amp;RDS资源,30分钟完成数据库上云实战!https://developer.aliyun.com/adc/scenario/51eefbd1894e42f6bb9acacadd3f9121?spm=a2c6h.13788135.J_3257954370.9.4ba85f24utseFl
相关文章
|
JSON 移动开发 JavaScript
vue省市区三级联动-封装集成
最近在学习开发H5产品,想用【mint-ui】的Picker和Popup组件去创建一个地址选择器。发现mint-ui官网只有一个简单的示例,要满足省/市/区三级联动的需求还需要做很多事情,也找了很多相关文档也没有一个比较系统的说明或demo。为此,在这里做了一个比较系统总结,上传一个实现的demo,方便以后使用。
447 0
vue省市区三级联动-封装集成
自定义组件之三级联动
 小程序的联动已经出了来,但是还是想手动写个,说干就干 pickers.axml {{province}}-{{city}}-{{county}}取消确定{{item}}{{item}}{{item}} pickers.
625 0
|
20天前
|
数据采集 前端开发 数据库
实时动态实现省市区三级联动选择器
实时动态实现省市区三级联动选择器
19 0
|
29天前
|
JavaScript
原生js实现省市区三级联动
原生js实现省市区三级联动
25 0
|
29天前
|
JavaScript
制作JS省市区三级联动遇到市区选项是空白的问题
制作JS省市区三级联动遇到市区选项是空白的问题
|
29天前
|
SQL 缓存 JSON
vue利用级联选择器实现全国省市区乡村五级菜单联动
vue利用级联选择器实现全国省市区乡村五级菜单联动
72 0
|
29天前
|
小程序 前端开发
实现微信小程序picker 省市区 自定义数据 支持三级联动
实现微信小程序picker 省市区 自定义数据 支持三级联动
120 0
|
JSON JavaScript 数据格式
开源三级联动,Vue.js编写省份、城市、区、县三级联动源码
开源三级联动,Vue.js编写省份、城市、区、县三级联动源码
201 0
开源三级联动,Vue.js编写省份、城市、区、县三级联动源码
|
JavaScript
省市区三级联动,JS实现
文件下载地址:http://files.cnblogs.com/files/chenwolong/jsAddress.rar 示例截图: 在这里自己记录一个方法: function cmbAddOption(cmb, str, obj) { var option = document.
2559 0

热门文章

最新文章