# 城市选择组件

# 概述

  • 区域城市选择在目前我们的互联网产品中比较多见的了,比如我们平时去淘宝天猫京东拼多多等电商平台去购物的时候,下单好往往需要我们输入收货地址,有过经验的朋友应该都深有体会录入新地址时需要选择省市区来表明我们的快递的收件城市,那就好理解了,在比如我们在维护后台系统内部人员数据时常常也需要维护一下这个用户的所在城市,居住地等等,传统的开发中,需要我们写大量的JS去一级级的获取,从省份获取城市,再根据城市获取县区甚至所属街道,每次用到的地方都得去写一遍获取城市,涉及到大量的网络请求和JS代码,让我们的表单页看上去非常的杂乱无章,整个页面表单第一眼看上去全部JS、CSS、HTML,开发体验特别差,后期的维护成本也非常的高,鉴于此,我们开发一套完全独立的城市选择组件,只需要在使用到的地方直接引入即可,避免了每次都去写重复臃肿的代码,下面我们一起了解下。

  • 鉴于选择方式的不同,平台研发的城市选择组件分两种形式,一种是常见的多表单控件排版的形式,另一种就是根据A-Z根据城市首字母选择的形式,下面我们分别给大家介绍。

# 通用模式

普通模式很好理解,我们我们平台所常见的三级联动选择的形式,这种形式比较直观,也是大家平时常用的一种形式。

  • 组件:<widget:citySingleSelect th:value="${info['districtId']} ?: 0" limit="3"/>

  • 参数:

  1. 城市组件参数是组件自定义好的,所以在建表的时候如果涉及省市区选择时,需要孤固定一个参数:省份(provinceId)城市(cityId)县区(districtId);
  2. limit=3此参数表示当前所引用的城市组件是一级、二级还是三级,当limit=2时表示只有省份、城市的选择,当limit=1时表示只有省份一级的选择;
  • 组件使用

在表单中我们该如何去调用城市组件呢?如下所示:

<form class="layui-form model-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">所属城市:</label>
        <widget:citySingleSelect th:value="${info['districtId']} ?: 0" limit="3"/>
    </div>
</form>
1
2
3
4
5
6
  • 效果展示:

    mixureSecure

# A-Z选择模式

跟上面通用模式不同,这一种是采用城市数字母分类筛选选择的方式,好处时可以根据字母便捷的精准定位到具体想要选择的城市;

  • 组件:<widget:cityComplexSelect name="省/市/区" th:value="${info['districtId']} ?: 0" limit="3"/>

  • 参数:

  1. 城市组件参数是组件自定义好的,所以在建表的时候如果涉及省市区选择时,需要孤固定一个参数:省份(provinceId)城市(cityId)县区(districtId);
  2. limit=3此参数表示当前所引用的城市组件是一级、二级还是三级,当limit=2时表示只有省份、城市的选择,当limit=1时表示只有省份一级的选择;
  • 组件使用

在表单中我们该如何去调用城市组件呢?如下所示:

<form class="layui-form model-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">所属城市:</label>
        <widget:cityComplexSelect name="省/市/区" th:value="${info['districtId']} ?: 0" limit="3"/>
    </div>
</form>
1
2
3
4
5
6
  • 效果展示:

    mixureSecure