用bootstrapTable实现考勤报表的动态生成

最新推荐文章于 2024-08-08 07:34:33 发布

nb7474

最新推荐文章于 2024-08-08 07:34:33 发布

阅读量1w

点赞数 4

分类专栏：前端学习 dom节点操作文章标签： bootstrap-table date

本文链接：https://blog.csdn.net/nb7474/article/details/79151912

版权

本文介绍了如何在考勤报表设计中，利用bootstrapTable动态生成不同月份的日期列。在点击查询时，根据选定的年月获取相应天数，动态创建th并初始化表格。在解决问题的过程中，遇到了表格格式错误，原因是查询后插件在table外生成了额外元素。最终解决方案是使用div替代table，并在每次查询时生成新的table，初始化表格内容，从而避免乱码问题。此外，还展示了datetimepicker插件用于月份选择的配置。

摘要由CSDN通过智能技术生成

在设计考勤报表的时候，由于每个月的日期是不同的，所以他的表需要动态生成。而bootstrapTable表格的初始化时候，是根据开始时候静态页面所规定的th标签中内容进行初始化。

例如：

<table id="tablesinglelast">
	<thead>
		<tr>
			 <th data-field="workDate" id="ws.ref_date" data-valign="middle" data-align="center">工作日日期</th>
			 <th data-field="OnDuty" data-valign="middle" data-align="center">上班打卡时间</th>
			 <th data-field="OffDuty" data-valign="middle" data-align="center">下班打卡时间</th>
			 <th data-field="workTime" data-valign="middle" data-align="center">工作时长</th>
		</tr>
	</thead>
</table>

该表格中存在四列数据，分别对应这个工作日日期、上班打卡时间、下班打卡时间、工作时长，每个th中的data-field属性都不相同，在bootstraptable初始化的时候根据data-field中的名称，将内容存放在对应的列下。

而在做考勤报表的时候，需要根据所选择的月份显示不同长度的日期，这就不能再页面中写死在进行初始化。

具体页面效果如下：
这里写图片描述

解决方法：当点击查询的时候，根据所选择的月份与年份，得到所对应天数，在页面动态生成所有的th。

html代码：

<body>
<div class="col-xs-12" style="margin-top: 20px">
		    <form class="form-inline">
			  <div class="form-group col-xs-12">
			    <label for="exampleInputName2">部门：</label>
			    <select id="department" class="