省市区 - 三级联动通用化模块组件-阿里云开发者社区

开发者社区> 风间影月> 正文

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

简介: 都说我们要做模块化设计,而不要做功能化设计 什么是模块化设计,就是可插拔性高,组件化,想要就用,不要用拉倒,直接删除就行 什么是功能化设计,就是一个简单的功能,实现想要的效果,但是不够通用化,别人要用的话需要读懂你的代码,还需要复制黏贴很多代码这样效率不高   今天写了一个省市区三级联动的模...
+关注继续查看

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

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

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

 

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

主要使用到的技术: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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8479 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
10918 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10280 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2245 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11859 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
12149 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4548 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
21635 0
+关注
风间影月
互联网后端开发工程师,技术经理,项目经理,架构师
170
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载