版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_26641781/article/details/84561937
先看看效果，这里实现的是城市联动的效果：
前端部分，用的是layui框架
先看看页面代码：
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<!--头-->
<div th:replace="fragments/head :: header"></div>
<div class="layui-body" style="margin: 1%">
<form id="positionSearch" class="layui-form layui-form-pane" method="post" style="margin-top: 20px;">
<div class="layui-form-item">
<div class="layui-input-inline">
<select name="provinceId" id="province" lay-filter="province" >
<option value="">请选择省份</option>
<option th:each="item:${provinces}" th:text="${item.provinceName}"
th:value="${item.id}" ></option>
</select>
</div>
<div class="layui-input-inline">
<select name="cityId" id="city" lay-filter="city">
<option value="">请选择城市</option>
</select>
</div>
<div class="layui-input-inline">
<select name="districtId" id="district" >
<option value="">请选择区县</option>
</select>
</div>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
<button class="layui-btn" lay-submit="" lay-filter="searchSubmit">提交</button>
</div>
</form>
<hr class="layui-bg-black"/>
<table id="positionList" lay-filter="positionTable"></table>
</div>
<!--底部-->
<div th:replace="fragments/footer :: footer"></div>
<script src="/js/position/position.js"></script>
</div>
</body>
接下来主要看的是position.js，在这个js文件里面对表格进行初始化，加载后台传过来的数据：
/**
* 省市区管理
*/
var pageCurr;
var form;
$(function() {
layui.use('table', function(){
var table = layui.table;
form = layui.form;
tableIns=table.render({
elem: '#positionList',
url:'/position/positionList',
method: 'post', //默认：get请求
cellMinWidth: 80,
page: true,
request: {
pageName: 'pageNum', //页码的参数名称，默认：pageNum
limitName: 'pageSize' //每页数据量的参数名，默认：pageSize
},
response:{
statusName: 'code', //数据状态的字段名称，默认：code
statusCode: 200, //成功的状态码，默认：0
countName: 'totals', //数据总数的字段名称，默认：count
dataName: 'list' //数据列表的字段名称，默认：data
},
cols: [[
{type:'numbers'}
,{field:'id', title:'ID',width:80}
,{field:'province', title:'省份名称',align:'center'}
,{field:'city', title:'城市名称',align:'center'}
,{field:'district', title: '区域名称',align:'center'}
,{fixed:'right', title:'操作',width:140,align:'center', toolbar:'#optBar'}
]],
done: function(res, curr, count){
$(".layui-table-box").find("[data-field='id']").css("display","none");
pageCurr=curr;
}
});
form.on('select(province)', function(data){
//var provinceId = $("#province option:selected").val();
//初始化城市列表
getCityList(data.value);
});
form.on('select(city)', function(data){
//初始化区县列表
getDistrictList(data.value);
});
//监听工具条
table.on('tool(positionTable)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
//编辑
getBank(data,data.id);
}
});
//监听提交
form.on('submit(bankSubmit)', function(data){
// TODO 校验
//formSubmit(data);
return false;
});
//监听搜索框
form.on('submit(searchSubmit)', function(data){
//重新加载table
console.log(data);
load(data);
return false;
});
});
});
//根据省份id获取城市列表
function getCityList(provinceId) {
$.ajax({
url:'/position/getCityList?provinceId='+provinceId,
dataType:'json',
async: true,
success:function(data){
console.log(data.length);
$("#city").html("<option value=''>请选择城市</option>");
$.each(data,function(index,item){
$('#city').append(new Option(item.cityName,item.id));//往下拉菜单里添加元素
form.render('select'); //这个很重要
})
}
});
}
//根据城市id获取区县列表
function getDistrictList(cityId) {
$.ajax({
url:'/position/getDistrictList?cityId='+cityId,
dataType:'json',
async: true,
success:function(data){
$("#district").html("<option value=''>请选择区县</option>");
$.each(data,function(index,item){
$('#district').append(new Option(item.areaName,item.id));//往下拉菜单里添加元素
form.render('select'); //这个很重要
})
}
});
}
function load(obj){
//重新加载table
tableIns.reload({
where:eld
, page: {
curr: pageCurr //从当前页码开始
}
});
}
后台部分，这里用到的是springboot+mybatis作为后端框架
多级联动的实现
进入页面的时候，获取省份列表，然后前台通过getCityList和getDistrictList这两个方法ajax请求后台数据：
/**
*
* 功能描述: 进入省市区管理
*
* @param:
* @return:
* @auther: youqing
* @date: 2018/11/26 11:24
*/
@RequestMapping("positionManage")
public String positionManage(Model model) {
//获取省份列表
List<BaseProvince> provinces = positionService.getProvinceList();
model.addAttribute("provinces",provinces);
return "/position/positionManage";
}
/**
*
* 功能描述: 根据省份id获取城市列表
*
* @param:
* @return:
* @auther: youqing
* @date: 2018/11/26 17:59
*/
@GetMapping("getCityList")
@ResponseBody
public List<BaseCity> getCityList(Long provinceId){
logger.info("根据省份id获取城市列表");
List<BaseCity> baseCities = positionService.getCityList(provinceId);
return baseCities;
}
/**
*
* 功能描述: 根据城市id获取区县列表
*
* @param:
* @return:
* @auther: youqing
* @date: 2018/11/26 18:01
*/
@GetMapping("getDistrictList")
@ResponseBody
public List<BaseDistrict> getDistrictList(Long cityId){
logger.info("根据城市id获取区县列表");
List<BaseDistrict> district = positionService.getDistrict(cityId);
return district;
}
搜索的实现
controller：
@RequestMapping("positionList")
@ResponseBody
public PageDataResult getPositionList(@RequestParam("pageNum") Integer pageNum,
@RequestParam("pageSize") Integer pageSize,PositionDTO positionDTO){
logger.info("获取省市区列表数据");
PageDataResult pdr = new PageDataResult();
try {
if(null == pageNum) {
pageNum = 1;
}
if(null == pageSize) {
pageSize = 10;
}
// 获取用户列表
pdr = positionService.getPositionList(pageNum ,pageSize,positionDTO);
} catch (Exception e) {
e.printStackTrace();
logger.error("省市区列表查询异常！", e);
}
return pdr;
}
PositionDTO实体类用来接收前台传递过来的省市区id参数：
@Data
public class PositionDTO {
private String province;
private String city;
private String district;
private Long provinceId;
private Long cityId;
private Long districtId;
}
Service层的getPositionList(）具体实现：
public PageDataResult getPositionList(Integer pageNum, Integer pageSize,PositionDTO positionDTO) {
PageDataResult pageDataResult = new PageDataResult();
List<PositionDTO> positionList = baseProvinceMapper.getPositionList(pageNum,pageSize,positionDTO);
//总记录数量
int count = baseProvinceMapper.countOnPositionList(positionDTO);
if(positionList.size() != 0){
pageDataResult.setList(positionList);
pageDataResult.setTotals(count);
}
return pageDataResult;
}
PageDataResult封装数据实体类：
public class PageDataResult {
private Integer code=200;
//总记录数量
private Integer totals;
private List<?> list;
}
mapper文件里的sql语句：
<select id="getPositionList" resultType="com.*.*.dto.PositionDTO">
SELECT p.id AS id, p.province_name AS province ,
city.city_name AS city ,d.area_name AS district
FROM base_province as p
left JOIN base_city as city on city.province_id = p.id
left JOIN base_district as d on d.city_id = city.id
<where>
<if test="positionDTO.provinceId != null">
p.id = #{positionDTO.provinceId}
</if>
<if test="positionDTO.cityId != null">
and city.id = #{positionDTO.cityId}
</if>
<if test="positionDTO.districtId != null">
and d.id = #{positionDTO.districtId}
</if>
</where>
limit ${(pageNum-1)*pageSize},${pageSize};
</select>
<select id="countOnPositionList" resultType="java.lang.Integer">
SELECT count(1) FROM (
SELECT p.id, p.province_name,city.city_name ,d.area_name
FROM base_province as p
left JOIN base_city as city on city.province_id = p.id
left JOIN base_district as d on d.city_id = city.id
<where>
<if test="positionDTO.provinceId != null">
p.id = #{positionDTO.provinceId}
</if>
<if test="positionDTO.cityId != null">
and city.id = #{positionDTO.cityId}
</if>
<if test="positionDTO.districtId != null">
and d.id = #{positionDTO.districtId}
</if>
</where>
) as t
</select>