应用场景：
我们公司主要做会议平板的产品，在技术人员将产品安装好后，会将设备的安装信息反馈给系统的管理人员，其中就包含设备安装的所在区域，我们管理员收到反馈后，会将该台设备的信息录入到系统中，录入界面自然要用到三级联动。
使用实例：
下面链接中有设备表和设备所在区域两张表
链接: https://pan.baidu.com/s/1fNlgT6lA9ZPMX752xEZTOw
提取码: 9fpd
信息录入时：
HTML:
<div class="form-group" style="width:550px">
<div class="col-sm-2 control-label">设备地点<font size="3" color="red">*</font></div>
<div class="layui-input-inline" style="width:125px">
<select id="province" lay-verify="required" lay-filter="province">
<option value="">请选择省</option>
</select>
</div>
<div class="layui-input-inline" style="width:120px">
<select id="city" lay-verify="required" lay-filter="city">
<option value="">请选择市</option>
</select>
</div>
<div class="layui-input-inline" style="width:120px">
<select id="county" lay-verify="required" lay-filter="county" >
<option value="">请选择县/区</option>
</select>
</div>
</div>Js：这里用到的是layui的下拉列表项改变监听事件
//在加载设备查询列表的时候，把省份加载出来
$(function () {
$.get( "/sys/queryProvince/" + 0, function (r) {
var areaData = r.data;
for (var i = 0; i < areaData.length; i++) {
$("#province").append("<option value=" + areaData[i].regionCode + ">" + areaData[i].regionNAME + "</option>");
}
});
});
layui监听事件
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form
, layer = layui.layer
, layedit = layui.layedit
, laydate = layui.laydate;
//监听一旦省级下拉有改变，就会传入省级编码作为参数，查询该省下的市
form.on('select(province)', function (data) {//查询市
var city = data.value;
$.get( "/sys/querycity/" + city, function (r) {
var areaData = r.data;
$("#city").find("option").remove();
$("#city").append("<option value=''>请选择市</option>");
for (var i = 0; i < areaData.length; i++) {
$("#city").append("<option value=" + areaData[i].regionCode + ">" + areaData[i].regionNAME + "</option>");
}
$("#county").find("option").remove();
$("#county").append(" <option value=\"\">请选择县/区</option>");
form.render();
});
});
//监听一旦市级下拉有改变，就会传入市级编码作为参数，查询该省下的区/县
form.on('select(city)', function (data) {//查询区县
var county = data.value;
$.get( "/sys/querycounty/" + county, function (r) {
var areaData = r.data;
$("#county").find("option").remove();
for (var i = 0; i < areaData.length; i++) {
$("#county").append("<option value=" + areaData[i].regionCode + ">" + areaData[i].regionNAME + "</option>");
}
form.render();
});
});
});Java后台接口：
Controller：
@Controller
@RequestMapping("sys")
public class SysRegionAddrController
{
@Autowired
private SysRegioAddrService sysRegioAddrService;
/*查询省*/
@RequestMapping(value="/queryProvince/{parentId}",method = { RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public JSONObject queryprovince(@PathVariable Long parentId, HttpServletRequest request) {
return sysRegioAddrService.queryprovince(parentId);
}
/*查询市*/
@RequestMapping(value="/querycity/{parentId}",method = { RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public JSONObject querycity(@PathVariable Long parentId, HttpServletRequest request) {
return sysRegioAddrService.querycity(parentId);
}
/*查询区县*/
@RequestMapping(value="/querycounty/{parentId}",method = { RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public JSONObject querycounty(@PathVariable Long parentId, HttpServletRequest request) {
return sysRegioAddrService.querycounty(parentId);
}
}Service：市和区县的service方法同省的查询方法一样，就不贴了。
public static final Logger logger = LoggerFactory.getLogger(SysRegioAddrServiceImpl.class);
@Override public JSONObject queryprovince(Long parentId) throws ServiceRuntimeException
{
JSONObject result = new JSONObject();
try
{
List<SysRegionAddrEntity> list = this.sysRegioAddrServiceMapper.queryprovince(parentId);
if (list.isEmpty())
{
result.put("msg", "查询省份失败");
result.put("flag", true);
result.put("data", list);
result.put("code", HttpStatusCode.OK.value());
}
else
{
result.put("msg", "查询省份成功");
result.put("flag", true);
result.put("data", list);
result.put("code", HttpStatusCode.OK.value());
}
return result;
}
catch (Exception e)
{
logger.error(e.getCause() + " ---- " + e.getMessage());
throw new ServiceRuntimeException(e.getCause(), "tips.purete.opertion.query.error");
}
}Mapper:市和区县的Mapper方法同省的查询方法一样，也不贴了。List<SysRegionAddrEntity> queryprovince(Long metId) throws Exception;mapper.xml
<select id="queryprovince" resultMap="BaseResultMap" parameterType="java.lang.Long">
select
<include refid="Base_egion_List"/>
from sys_region_addr
where parent_id = #{id,jdbcType=BIGINT}
</select>
<select id="querycity" resultMap="BaseResultMap" parameterType="java.lang.Long">
select
<include refid="Base_egion_List"/>
from sys_region_addr where parent_id in
(select region_id from sys_region_addr where region_code=#{metId,jdbcType=BIGINT})
</select>
<select id="querycounty" resultMap="BaseResultMap" parameterType="java.lang.Long">
select
<include refid="Base_egion_List"/>
from sys_region_addr where parent_id in
(select region_id from sys_region_addr where region_code=#{metId,jdbcType=BIGINT})
</select>录入的就到这了。
再看一下根据详情查看的吧。
getInfo: function (id) {
var province;
var city;
var county;
$.get(baseURL + "/deviceInfo/info/" + id, function (r) {
province = r.data.extendEntity.province;
$("#province").val(province);
city = r.data.extendEntity.city;
county = r.data.extendEntity.county;
layui.form.render();
vm.deviceInfo = r.data;
vm.extendEntity = r.data.extendEntity;
if(province!=null){
$.get( "/sys/querycity/" + province , function (r) {
var areaData = r.data;
$("#city").find("option").remove();
for (var i = 0; i < areaData.length; i++) {
$("#city").append("<option value=" + areaData[i].regionCode + ">" + areaData[i].regionNAME + "</option>");
}
$("#city").val(city);
layui.form.render();
});
$.get( "/sys/querycounty/" + city, function (r) {
var areaData = r.data;
$("#county").find("option").remove();
for (var i = 0; i < areaData.length; i++) {
$("#county").append("<option value=" + areaData[i].regionCode + ">" + areaData[i].regionNAME + "</option>");
}
$("#county").val(county);
layui.form.render();
});
}
});
},效果图：
