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

程序员文章站 2022-04-30 16:36:41

...

在设计考勤报表的时候，由于每个月的日期是不同的，所以他的表需要动态生成。而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中的名称，将内容存放在对应的列下。

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

具体页面效果如下：
用bootstrapTable实现考勤报表的动态生成

解决方法：当点击查询的时候，根据所选择的月份与年份，得到所对应天数，在页面动态生成所有的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代表月份级别。

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

结合css用Html 实现动态显示颜色块的报表效果