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

本文介绍了如何在考勤报表设计中,利用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="
评论 25
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值