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

在设计考勤报表的时候，由于每个月的日期是不同的，所以他的表需要动态生成。而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="form-control" style="margin-right: 50px;" name='departmentId'><option>==请选择==</option><c:forEach var="department" items="${department}"><option value="${department.departmentId}">${department.departmentName}</option></c:forEach></select></div><div class="form-group col-xs-12"><label for="date">时间：</label><input class="form-control" id="date" name='date'> <a onclick="ifnull()" class="btn btn-primary">查询</a></div></form></div><div class="col-xs-12" id="singlelast"></div>
</body>

js代码：

function ifnull(){if($("#department").val()=="==请选择=="){alert("请选择需要查询的部门");return false;}if($("#date").val()==""){alert("请选择需要查询的时间");return false;}var date = $("#date").val();var year=parseInt(date.split("-")[0]);var month=parseInt(date.split("-")[1]);var daycount=getLastDay(year, month); //得到选中月份的最大天数$("#singlelast").empty();$("#singlelast").append("<table id='tablesinglelast'></table>")var appendPos=$("#tablesinglelast");//$("#tablesinglelast").bootstrapTable('destroy');appendPos.append("<thead><tr><th data-field='employeeName' rowspan='2' id='employeeName' data-valign='middle' data-align='center'>员工姓名</th>" +"<th data-field='exceptionTime' data-valign='middle' rowspan='2' data-align='center'>打卡异常次数</th>" +"<th data-field='lateTime' data-valign='middle' rowspan='2' data-align='center'>迟到打卡次数</th>" +"<th data-field='earlyTime' data-valign='middle' rowspan='2' data-align='center'>早退打卡次数</th>" +"<th data-field='noDutyTime' data-valign='middle' rowspan='2' data-align='center'>缺卡次数</th>" + "<th data-field='workTime' data-valign='middle' rowspan='2' data-align='center'>出勤天数</th></tr><tr></tr></thead>");for(var i=1;i<=daycount;i++){var appendPos2=$("#tablesinglelast").children().eq(0).children().eq(0).children().eq(i-1);appendPos2.after("<th data-valign='middle' colspan='1' data-formatter='displaycolor' data-align='center'>"+i+"</th>");}for(var i=1;i<=daycount;i++){var appendPos3=$("#tablesinglelast").children().eq(0).children().eq(1);var month2=(month>9)?(""+month):("0"+month);var day=(i>9)?(""+i):("0"+i);var heredate = year+"-"+month2+"-"+day;var weekday = new Date(heredate).getDay();text = "";switch (weekday) {case 0:text = "日";break;case 1:text = "一";break;case 2:text = "二";break;case 3:text = "三";break;case 4:text = "四";break;case 5:text = "五";break;case 6:text = "六";break;}appendPos3.append("<th data-formatter='displaycolor' data-align='center' data-field='"+year+"-"+month2+"-"+day+"'>"+text+"</th>");}readyTable();getAttendanceResult();
}function getLastDay(year,month){   var new_year = year;  //取当前的年份   var new_month = month++;//取下一个月的第一天，方便计算（最后一天不固定）   if(month>12)      //如果当前大于12月，则年份转到下一年   {   new_month -=12;    //月份减   new_year++;      //年份增   }   var new_date = new Date(new_year,new_month,1);        //取当年当月中的第一天   return (new Date(new_date.getTime()-1000*60*60*24)).getDate();//获取当月最后一天日期
}

通过getLastDay函数得到每月的天数，然后通过for循环进行再指定位置添加子元素。

这里又遇到的问题就是第一次查询一切没问题，第二次查询的时候就会出现表格格式错误。通过每次点击查询后情况表格中的所有元素的方法依然不能解决这个问题。

后来通过浏览器f12分析页面代码，发现当点击查询时候，会在表格table标签外生成一个父级元素和一些兄弟元素，这就导致清空table中的元素的时候并不影响table外插件所生成的内容。所以最终还是会乱码。

解决方法：不要table标签，只给一个div标签，每次点击查询按钮的时候，在div中生成一个新的table，向table中添加日期等列，最后进行初始化。问题解决。

最后贴出日历插件只显示月份的代码：

$('#date').datetimepicker({format: 'yyyy-mm',autoclose : true,startView : 3,minView : 3});

这个datetimepicker插件中的startview、minview属性可控制下拉内容所显示的级别，3代表月份级别。

补充

有兄弟说想看一下readyTable()和getAttendanceRecord()函数，下面贴一下：

function getAttendanceResult(){var department = $("#department").val();var date = $("#date").val();$.ajax({url:"getAttendanceResult",type:"post",dataType : 'json',data:{"departmentId":department,"date":date,},success:function(data){console.log(data);$('#tablesinglelast').bootstrapTable('load', data);},error:function(){alert("获取考勤结果失败");}});
}
function readyTable(){$('#tablesinglelast').bootstrapTable({//bootstraptable 插件pageNumber:1,                       //初始化加载第一页，默认第一页pageSize: 10,                       //每页的记录行数（*）pageList: [10, 20 ,30], pagination: true,                   //是否显示分页（*）sortable: true,                     //是否启用排序sortOrder: 'asc', showExport: true,                     //是否显示导出exportDataType: 'all', search:true,detailView: true,//父子表onExpandRow: function (index, row, $detail) {oInitInitSubTable(index, row, $detail);}});
}

用bootstrapTable实现考勤报表的动态生成相关推荐

数据库与Excel报表的动态生成
一.数据库与Excel报表的动态生成 (1)读取数据库的数据动态生成Excel报表,这是JSP应用中常遇到的问题,本节采用的基本方法是: 在Excel工作薄中,将报表模板制作在第一张工作表中,从数据库 ...
visual Studio 2010 自带报表RDLC动态生成
---恢复内容开始--- 首先来说没有做到全部的代码操作,刚一上来要建立一个报表文件,并且给他绑定一个随便的数据集,例如 dataset1 然后才是我接下来的操作,以上的操作,网上很多,一查就能找到 ...
POI利用word模板动态生成word报表以及动态生成word表格
目录核心依赖动态表格测试类工具类动态数据测试类工具类核心依赖 <dependency><groupId>org.apache.poi</groupId&g ...
报表数据动态生成页面
做过一个WEBGIS的项目,要动态出表,并且把统计报表的数据直接生成到页面上.做过两种方法 1.直接把数据生成为一个HTML静态页面,先将数据生成静态Table的字符串 using System.IO ...
FineReport帆软报表实现动态生成递增列
数据如下,需要将下列数据转成第1次时间,第1次地址,第2次时间,第2次地址-显示最终效果实现步骤 1.改写sql 需要用count函数计算出最大行数这也是动态列的最大值,比如这边为7,到时候生成 ...
web项目中填写sql信息自动动态生成报表功能（springboot）
(一)大概背景: 需求就是设计一个自定义报表功能,当需要新报表时,能够快速的构建. 经过初步的构思,有至少三种方式可以实现: 构建demo代码,一个报表对应编写一套代码,不过可以将重复代码提取,尽可 ...
C# 动态生成RDLC报表文件
Visual Studio 中的报表有两种,水晶报表和微软自己的RDLC报表,水晶报表太复杂,一直不用.感觉rdlc的报表很好用,跟着web一起发布也很简单(只可惜只能在IE中使用).不好的是太繁琐, ...
ABAP动态编程-动态生成报表、动态屏幕
目录前言一.动态生成报表并调用二.动态生成屏幕并调用总结前言本文主要讲述ABAP编程中根据逻辑自动生成报表及屏幕(依托语句GENERATE DYNPRO)的实现示例及简单说明. 一.动态生 ...
Django 权限管理-后台根据用户权限动态生成菜单
Django权限管理实现目标: 1.管理用户,添加角色,用户关联角色 2.添加权限.角色关联权限 3.添加动作.权限关联动作 4.添加菜单.权限关联菜单实现动态生成用户权限菜单(可设置多级菜单嵌套 ...

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

补充

用bootstrapTable实现考勤报表的动态生成相关推荐

最新文章

热门文章