在前两篇文章中,实现了layui的级联菜单动态赋值和带条件的分页查询,那么接下来组合数据表格来实现数据表格的动态重载,效果大概如下:
dtcz

实现

创建下拉框并绑定id

<form class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">地点选择</label>
        <div class="layui-input-inline">
            <select name="buildingId" lay-filter="buildingId">
                <option value="">选择教学楼</option>
                <option th:each="building : ${building_list}" th:value="${building.getId()}" th:text="${building.getBuildingname()}"></option>
            </select>
        </div>

<div class="layui-input-inline" >
            <select name="floorId" id="floorId" lay-filter="floorId">
                <option value="">请先选择教学楼</option>
            </select>
        </div>

</div>

</form>

<table class="layui-hide" id="roomlist" lay-filter="roomlist"></table>

初始化数据表格

这一步不是必要的,可以在选择下拉框之后再加载表格

let roomTable = table.render({
    elem: '#roomlist'
    , url: '/classrooms/list/page'
    , toolbar: '#toolbarRoomList'
    , cols: [[
        { type: 'checkbox', fixed: 'left' }
        , { field: 'id', title: '教室ID', sort: true, width: 100 }
        , { field: 'roomname', title: '教室号' }
        , { field: 'buildingid', title: '所属楼栋ID' }
        , { field: 'floor', title: '所属楼层' }
        , { fixed: 'right', title: '操作', toolbar: '#barroom', width: 150 }
    ]]
    , page: true
});

然后我们创建一个函数,用来接受传入的下拉框选中的id值,然后使用传入的值对数据表格进行重载。

function loadTable(buildingid,floors){
    roomTable.reload({
        elem: '#roomlist'
        , url: '/classrooms/list/page?buildingid='+ buildingid +'&floor='+floors
        , toolbar: '#toolbarRoomList'
        , cols: [[
        { type: 'checkbox', fixed: 'left' }
        , { field: 'id', title: '教室ID', sort: true, width: 100 }
        , { field: 'roomname', title: '教室号' }
        , { field: 'buildingid', title: '所属楼栋ID' }
        , { field: 'floor', title: '所属楼层' }
        , { fixed: 'right', title: '操作', toolbar: '#barroom', width: 150 }
        ]]
            , page: true
    });
}

第二个下拉框的重载方式请查看之前的文章

接下来是在第二个下拉框选中之后进行表格重载。

我定义了两个全局变量,分别代表两个级联下拉框当前所选中的值,默认初始化为0,在下拉框选中之后,这两个值也就会相应的改变。之后将两个值传入表格重载函数内,函数会根据所传入的id向后端请求数据,获取到数据之后对数据表格执行刷新操作。

let qj_bid = 0;
let qj_fid = 0;
form.on('select(floorId)', function(data){
    console.log("bid_local:" + bid_local);
    console.log(data.value); //得到被选中的值
    loadTable(bid_local,data.value);
    qj_bid = bid_local;  //bid_local存储的是上一个下拉框的值
    qj_fid = data.value;
    console.log(qj_bid + "-----" + qj_fid)
});

后端接口

根据上一篇文章所创建的条件查询接口,将查询出的数据返回前端

@GetMapping("/classrooms/list/page")
public DataResponse getClassrooms(@RequestParam(value = "page", required = false,defaultValue = "1") Integer page, @RequestParam(value = "limit", required = false,defaultValue = "10") Integer limit,@RequestParam(value = "buildingid",required = false) Integer bid,@RequestParam(value = "floor",required = false) Integer fid,HttpSession session, Model model){
   UseSessionUser.doSessionUserModel(session,model);
   List<Room> rooms;
   Long count = 0L;
   if (fid == null || bid == null){
      rooms = roomService.getPage(page, limit);
      count = buildingRepository.count(); // 获取总数量
   }else {
      rooms = roomService.getPageByBidAndFid(page, limit,bid,fid);
      count = roomRepository.countByBuildingidAndFloorEquals(bid,fid);
   }

   return new DataResponse().success().data(rooms).count(count).message("");

}

这个时候,基本功能就实现了,接下来的工作就是进行测试和异常处理了。

微信公众号
最后修改:2021 年 07 月 25 日 09 : 33 PM
如果您觉得我的文章有帮助,请随意赞赏!