layui 动态表头实现

最近写公司的 OA 遇到很多麻烦问题
公司给我配的前端是个新来的实习生, 而且还不会用 layUI, 遇到问题从来不查文档, 都是张口就问: 这咋回事 这里数据怎么没出来 这里为什么报错
一次两次还能耐心的给他说一下, 时间久了我还真有点招架不住, 最后干脆全部自己来了, 之前我也没接触过 layUI,这个表格渲染就算是一个小总结吧

首先说一下我的使用场景:
在这里插入图片描述
这里是产品给的原型, 场景是人事进入员工工时录入时,显示所有员工当前月份所有星期的工时汇总
可以看出表头是动态的,因为每个月份内周的数量是不一样的, 起初我是打算用freemarker来做的 , 后来想想算了 ,既然用的 layUI 框架,那就用 layUI 框架来写.

下面是 js 部分

$.ajax({
//我这里的思路是先用ajax 请求表头数据
    url: '/working/month?monthTime=' + currentDate,
    success: function (data) {
        if (data.code == 0) {
            var result = data.data;
            var hoursList = result[0].list;
            var cols = [];
            var temp = {
                field: 'name',
                title: '姓名',
                width: 80
            }
            cols.push(temp);
            //遍历表头数据, 添加到数组中
            for (var k = 0, len = hoursList.length; k < len; k++) {
                var h = hoursList[k].startTime + '--' + hoursList[k].endTime;
                var t = {
                    field: h,
                    title: h,
                };
                cols.push(t);
            }
            // 然后开始渲染表格
            table.render({
                elem: '#employeesTable'
                , height: 420
                , url: '/working/getMonthHours?monthTime=' + currentDate//数据接口
                , title: '用户表'
                , cols: [cols],
                done: function (res) {
                }
            });
        }
    }
});

下面是业务层

@RequestMapping("/getMonthHours")
public ResultMsg<List<Map<String, String>>> getMonthHours(@RequestParam @DateTimeFormat(pattern = “yyyy-MM-dd”) LocalDate monthTime) {
List responseList = service.selectWorkingHoursInMonth(monthTime);
List<Map<String, String>> maps = new ArrayList<>();
responseList.forEach(monthOverviewResponse -> {
Map<String, String> map = new HashMap<>();
map.put(“name”, monthOverviewResponse.getRealName());
map.put(“username”, monthOverviewResponse.getUsername());
monthOverviewResponse.getList().forEach(workingHoursResponse -> {
StringBuffer sb = new StringBuffer();
sb.append(workingHoursResponse.getStartTime()).append("–").append(workingHoursResponse.getEndTime());
Double hours = workingHoursResponse.getHours();
if (Objects.isNull(hours)) {
map.put(sb.toString(), “<span style=“color: red”>未录入”);
} else {
map.put(sb.toString(), hours.toString());
}
});
maps.add(map);
});
return ResultMsg.success(maps);
}

实现方式并没有什么难度, 主要是思路 , 遇到问题还是不能钻牛角尖, 在没有想到用 ajax 先请求表头的时候, 我也是苦于如何设置 field 和 title . 也可能是前端写经验比较少, 以后还需要多学习学习 ,当然我更希望能给我配个好前端, 可以让我安心研究后台代码…
————————————————
版权声明：本文为CSDN博主「生活如此多娇！」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42438858/article/details/87621375