layui之多级联动和搜索实现

系统管理员 2022-04-13 04:14 695阅读 0赞

先看看效果，这里实现的是城市联动的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70]

## 前端部分，用的是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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI2NjQxNzgx_size_16_color_FFFFFF_t_70]: /images/20220413/1c85fdb9e25f4d50bef6559d84f33715.png