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>