bootstrap-select、datatables使用
1.引入樣式文件
<%--引入bootstrap_select樣式--%> <link rel="stylesheet" type="text/css" href="dist/css/bootstrap-select.min.css"> <scrip type="text/javascript" src="dist/js/bootstrap-select.min.js"></script> <scrip type="text/javascript" src="dist/js/i18n/defaults-*.min.js"></script> <%--引入datatables樣式文件--%> <link rel="stylesheet" type="text/css" href="tables/jquery.dataTables.min.css"> <scrip type="text/javascript" src="tables/jquery.dataTables.min.js"></script> <scrip type="text/javascript" src="tables/datatable-advanced.init.js"></script>
2.使用
2.1 tab頁切換
<div class="category w1200">
<ul>
<li class="active">單輪詳情</li>
<li>失敗測試例</li>
</ul>
</div>
<div class="content w1200">
<div class="cont active">
<div class="row"></div>
</div>
<div class="cont active">
<div class="row"></div>
</div>
</div>
<scrip>
$(function(){
//tab切換
$('.category ul li').click(function() {
var i = $(this).index();
$(this).addClass('active').siblings().removeClass('active');
$('.content .cont').eq(i).addClass('active').siblings().removeClass('active');
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); //解決tab頁切換後table表頭錯位的問題
})
});
</script>
2.2 bootstrap-select插件
<select id="project" name="project" class="selectpicker" data-size="6" data-style="btn-info" data-width="11%" data-live-search="true">
<c:forEach items="${projectList}" var="i" varStatus="status">
<option >${i.prj_name}</option>
</c:forEach>
</select>
<scrip type="text/javascript">
$(function(){
// 每次頁面刷新時都回到最新項目及最新項目對應的最新版本
$('#project').selectpicker('val','${projectList.size()==0?"0":projectList.get(0).prj_name}');
// 1.動態生成版本下拉選
$("#build").empty();
for(var i=0;i<data.buildList.length;i++){
$("#build").append("<option value='"+data.buildList[i]+"' >"+data.buildList[i]+"</option>");
}
// 缺一不可
//要以編程方式更新JavaScript的選擇，首先操做選擇，而後使用refresh方法更新UI以匹配新狀態。
//在刪除或添加選項時，或經過JavaScript禁用/啓用選擇時，這是必需的
$('#build').selectpicker('refresh');
//render方法強制從新渲染引導程序 - 選擇ui,若是當您編程時更改任何相關值而影響元素佈局，這將很是有用。
$('#build').selectpicker('render');
});
</script>
2.3 datatables插件
<table id="startTime" style="margin-left: 0px;width: 100%; !important;" class="table table-striped table-bordered" cellspacing="0">
<thead>
<tr style="width: 100%;">
<%--<c:forEach items="${bmList.get(0)}" var="data">
<td>${data.key}</td>
</c:forEach>--%>
<th>apkPackage</th>
<th>avg</th>
<th>max</th>
<th>min</th>
<c:if test="${csList.size()>0}">
<c:forEach var="i" begin="0" end="${csList.get(0).size()-5}">
<th>Round${i}</th>
</c:forEach>
</c:if>
</tr>
</thead>
<tbody>
<c:forEach items="${csList}" var="csMap" varStatus="j" step="1">
<tr>
<%--<c:forEach items="${bmMap}" var="bm">
<td>${bm.value}</td>
</c:forEach>--%>
<td>${csMap.apkName}</td>
<td>${csMap.stAvg}</td>
<td>${csMap.stMax}</td>
<td>${csMap.stMin}</td>
<c:forEach var="i" begin="0" end="${csList.get(0).size()-5}">
<%--須要將int類型轉換爲String,map中的key時String類型的--%>
<c:set var="idx">${i}</c:set>
<td><c:out value="${csMap.get(idx)}" /></td>
</c:forEach>
</tr>
</c:forEach>
</tbody>
</table>
<scrip type="text/javascript">
$(function(){
//sn值發生改變事件
$("#sn").change(function () {
//獲取當前項目名稱
var project = $("#project").val();
var build = $("#build").val();
var sn = $("#sn").val();
$.ajax({
type:"post",
url:"/findPerfDataByProjectAndBuildAndSn",
data:{"project":project,"build":build,"sn":sn},
success:function (data) {
// alert(data);
console.log(data);
// 5.動態修改coldStart表的數據
var cs = data.csList; //cs是一個數組
/*if(smoke.length!=0){
alert(smoke[0].tc_name);
}*/
// 動態生成table中的數據
$("#startTime").dataTable().fnClearTable(); //清空一下table
$("#startTime").dataTable().fnDestroy(); //還原初始化了的datatable
// $("#build").append("<option value = '' disabled selected>請選擇版本</option>")
//thead列的變化（有且只有一行）
$("#startTime_thead").empty();
var $tr = $("<tr></tr>");
$tr.append("<th>apkName</th>");
$tr.append("<th>avg</th>");
$tr.append("<th>max</th>");
$tr.append("<th>min</th>");
$("#startTime_thead").append($tr);
if(cs != null && cs.length > 0 && cs != ""){
for(var j=1;j<=Object.keys(cs[0]).length-4;j++){
$tr.append("<th>Round"+j+"</th>");
}
$("#startTime_thead").append($tr);
//tbody列的變化，循環行
for(var i=0;i<cs.length;i++){
var $tr = $("<tr></tr>");
// alert(Object.keys(cs[i]).length);
$tr.append("<td>"+cs[i].apkName+"</td>");
$tr.append("<td>"+cs[i].stAvg+"</td>");
$tr.append("<td>"+cs[i].stMax+"</td>");
$tr.append("<td>"+cs[i].stMin+"</td>");
//循環列
for(var j=1;j<=Object.keys(cs[i]).length-4;j++){
$tr.append("<td>"+cs[i][j]+"</td>");
}
$("#startTime_tbody").append($tr);
}
}
//dataTable從新渲染
$("#startTime").dataTable({
scrollY: 526,
"scrollX": true,
lengthChange: false,
});
},
error:function (msg) {
alert("網絡延遲，請待會加載......");
},
dataType:"json"
});
});
$("#ui").DataTable({
scrollY: 560,
"scrollX": true //啓動水平滾動
// lengthChange: false, //每頁可顯示的數據記錄數
// buttons: ['copy', 'excel', 'pdf']
// "pagingType":"full_numbers",
// "order": [[ 3, "desc" ]] //默認排序
});
$("#uiFail").DataTable({
scrollY: 560,
"scrollX": true //啓動水平滾動
// "pagingType":"full_numbers",
// "order": [[ 3, "desc" ]] //默認排序
});
});
</script>
2.4 ajax請求
<scrip type="text/javascript">
$(function () {
//project值發生改變事件
$("#project").change(function () {
//獲取當前項目名稱
var project = $(this).val();
$.ajax({
type:"post",
url:"/findUiDataByProject",
data:{"project":project},
success:function (data) {
// alert(data);
console.log(data);
// 4.動態修改ui單輪詳情的數據
var ui = data.uiList; //ui是一個數組
/*if(smoke.length!=0){
alert(smoke[0].tc_name);
}*/
// 動態生成table中的tbody
$("#ui").dataTable().fnClearTable(); //清空一下table
$("#ui").dataTable().fnDestroy(); //還原初始化了的datatable
$("#ui_tbody").empty();
// $("#ui tr:not(:first)").html("");
// $("#build").append("<option value = '' disabled selected>請選擇版本</option>")
for(var i=0;i<ui.length;i++){
var $tr = $("<tr></tr>");
$tr.append("<td>"+ui[i].tc_name+"</td>");
if(ui[i].test_result){
$tr.append("<td><span class='glyphicon glyphicon-ok-circle' style='color: green;'></span></td>");
}else{
$tr.append("<td><span class='glyphicon glyphicon-remove-circle' style='color: red;'></span></td>");
}
$tr.append("<td>"+ui[i].start_time+"</td>");
$tr.append("<td>"+ui[i].end_time+"</td>");
$("#ui_tbody").append($tr);
}
//dataTable從新渲染
$("#ui").dataTable({
scrollY: 560,
});
// 3.動態修改uiBrief的值
var uiBrief = data.uiBrief;
if(null != uiBrief && "" != uiBrief){
$("#totalRound_ui").html(uiBrief.total_round);
$("#totalTime_ui").html(parseInt(uiBrief.total_time/24)+"天"+uiBrief.total_time%24+"小時");
$("#totalCases_ui").html(uiBrief.total_cases);
$("#failCases_ui").html(uiBrief.fail_cases);
$("#passRate_ui").css("width", uiBrief.pass_rate+"%").text(uiBrief.pass_rate+"%");
}else{
$("#totalRound_ui").html("0");
$("#totalTime_ui").html("0");
$("#totalCases_ui").html("0");
$("#failCases_ui").html("0");
$("#passRate_ui").css("width", 0+"%").text(0+"%");
}
var testEvent = data.testEventList;
// alert(testEvent);
if(null != testEvent && "" != testEvent){
$("#startTime_ui").val(testEvent[0].start_time);
$("#archivePath_ui").val(testEvent[0].archive_path);
}else{
$("#startTime_ui").val("null");
$("#archivePath_ui").val("null");
}
},
error:function (msg) {
alert("網絡延遲，請待會加載......");
},
dataType:"json"
});
});
});
</script>
相關文章
- 1. jquery datatables使用
- 2. datatables使用
- 3. DataTables的使用
- 4. datatables的使用
- 5. datatables 使用
- 6. bootstrap中使用datatables
- 7. dataTables使用心得
- 8. DataTables使用總結
- 9. jQuery dataTables 的使用
- 10. datatables使用學習
- 更多相關文章...
- • TortoiseSVN 使用教程 - SVN 教程
- • Docker 容器使用 - Docker教程
- • Composer 安裝與使用
- • 使用Rxjava計算圓周率
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. jquery datatables使用
- 2. datatables使用
- 3. DataTables的使用
- 4. datatables的使用
- 5. datatables 使用
- 6. bootstrap中使用datatables
- 7. dataTables使用心得
- 8. DataTables使用總結
- 9. jQuery dataTables 的使用
- 10. datatables使用學習