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

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

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

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

 

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

主要使用到的技术：jquery，redis，springMVC，MyBatis（springMVC和MyBatis无所谓，你用struts或者hibernate或者spring data都行）

首先页面引入js

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

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

<div id="city"> 
        <select class="prov"></select>  
        <select class="city" disabled="disabled"></select> 
        <select class="dist" disabled="disabled"></select> 
    </div> 
    
    <div id="city2"> 
        <select class="prov"></select>  
        <select class="city" disabled="disabled"></select> 
        <select class="dist" disabled="disabled"></select> 
    </div> 
    
    <div id="city3"> 
        <select class="prov"></select>  
        <select class="city" disabled="disabled"></select> 
        <select class="dist" disabled="disabled"></select> 
    </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：

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

service：

@Override
    public CitiesDataResult getAllCities() {
        // 取出缓存
        try {
            String citiesDataResult = jedisClient.get(REDIS_CITIES_KEY);
            if (!StringUtils.isBlank(citiesDataResult)) {
                CitiesDataResult redisResult = JsonUtils.jsonToPojo(citiesDataResult, CitiesDataResult.class);
                return redisResult;
            }
        } catch (Exception e1) {
            e1.printStackTrace();
        }
        
        List<AreaProvince> provinceList = areaProvinceMapper.getProvinceList();
        List<Province> pList = new ArrayList<Province>();
        for (AreaProvince province : provinceList) {
            int provinceId = province.getProvinceId();
            String provinceName = province.getProvinceName();
            
            List<AreaCity> cityList = areaProvinceMapper.getCityListBypId(provinceId);
            List<City> cList = new ArrayList<City>();
            for (AreaCity city : cityList) {
                int cityId = city.getCityId();
                String cityName = city.getCityName();
                
                List<District> districtList = areaProvinceMapper.getDistrictListBycId(cityId);
                
                City c = new City();
                c.setN(cityName);
                c.setA(districtList);
                cList.add(c);
            }
            
            Province p = new Province(provinceName, cList);
            pList.add(p);
        }
        
        CitiesDataResult result = new CitiesDataResult();
        result.setCitylist(pList);
        
        // 放入缓存
        try {
            jedisClient.set(REDIS_CITIES_KEY, JsonUtils.objectToJson(result));
        } catch (Exception e) {
            e.printStackTrace();
        }
        
        return result;
    }

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

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

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

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

省市区 数据库 脚本 excel