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

layui 动态表头实现相关推荐

element ui表格点击整行选择_element-ui实现动态表头的表格问题汇总
demo代码: el-table动态表头 {{tableBody[scope.$index][idx]}} 动态表格是生成列,也就是每一个然后再根据所有列去遍历生成行,这样一个过程,知道这些,要做的就 ...
easyexcel 动态列_easyexcel动态表头列导出SequenceDiagram 阅读源码事半功倍
EasyExcel简介 Java解析.生成Excel比较有名的框架有Apache poi.jxl.但他们都存在一个严重的问题就是非常的耗内存,poi有一套SAX模式的API可以一定程度的解决一些内存溢 ...
[vue-element] ElementUI表格组件如何实现动态表头？
[vue-element] ElementUI表格组件如何实现动态表头? <template v-for="item in tableColownms"> <el ...
EasyExcel 动态表头 + 数据单元格合并
前言本文想要达到以及最终实现的效果: 要实现这种效果,包含两个部分的操作: 1. 动态表头 EasyExcel 生成 Excel 时要使表头有合并效果,可以采用**注解和非注解(动态表头)**的方法 ...
easyExcel 复杂表头动态表头
需求: 要根据数据来导出这个excel 左侧菜单有一百多个固定菜单,这些肯定不能放到数据库里建字段,所以就根据上面的抽检总点数,合格总点数,合格率三个字段建立数据库字段. 技术实现: 我们选择的是ea ...
EasyExcel解析动态表头及导出
前言 excel文件导入及导出,是日常开发中经常遇到的需求.本次笔者以EasyExcel为例,针对在项目中遇到的动态表头解析及导出的场景,详细介绍具体的代码实现过程. 参考地址 https://git ...
easyExcel实现单sheet多子表，并结合动态表头，复杂表头
easyExcel实现单sheet多子表,并结合动态表头,复杂表头一.实现目标二.官方文档阅读 1.动态表头 2.单页面多子表 3.复杂表头三.开始编码测试主类数据类LIst获取表头lis ...
动态表头excel导入(java)
动态表头excel导入 1. 导入依赖并设置实体首先配置poi版本相关的maven属性 <properties><poi.version>4.1.2</poi.vers ...
Layui动态渲染下拉框
本例包含测试页面代码,工具方法只有selectUtil <!DOCTYPE html> <html><head><meta charset="utf ...

layui 动态表头实现

layui 动态表头实现相关推荐

最新文章

热门文章