用bootstrapTable實現考勤報表的動態產生，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代表月份層級。
著作權聲明：本文為博主原創文章，未經博主允許不得轉載。 http://blog.csdn.net/nb7474/article/details/79151912Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
