layui之多級聯動和搜尋實現
阿新 • • 發佈：2018-12-04
先看看效果，這裡實現的是城市聯動的效果：
前端部分，用的是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>