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>

bootstrap-select、datatables插件使用的更多相关文章

  1. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

  2. dataTables 插件学习整理

    在项目中使用了dataTables 插件,学习整理一下. dataTables 的官方中文网站 http://www.datatables.club 引入文件: 所有的都要引入 jq文件 1. dat ...

  3. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  4. Bootstrap-风格的下拉按框:Bootstrap Select

    Bootstrap Select 是一个jQuery插件,提供了Bootstrap 风格的下拉选择框.拥有许多自定义的选项,可多选. 效果图: 源代码: <select class=" ...

  5. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  6. bootstrap select 多选的用法,取值和赋值(取消默认选择第一个的对勾)

    h5自带的select标签可以实现按住ctrl键多选的功能,但是样式及其难看. bootstrap select是很好用的前端插件 ​ 首先引入bootstrap和bootstrap-select的c ...

  7. bootstrap的popover插件在focus模式时在Safari浏览器无法使用的bug解决方案

    前言 最近在使用bootstrap的popover插件,效果如下: popover插件的focus模式时表现为当点击按钮时弹出浮动层,在点击浮动层外的任何一处,都隐藏浮动层. 但是在mac下的Safa ...

  8. bootstrap的日期插件datetimepicker有问题

    bootstrap的日期插件datetimepicker在chrome中会出现掉下来的现象,而且一直没找到原因,下载最新版的插件直接在各个浏览器中都会掉下来, 问题一直解决不了,转而换其他插件 htt ...

  9. bootstrap学习之三—插件

    一.模态框(modal)插件 1)为要触发模态框的组件添加data-toggle="modal",data-target="对应ID" 2)使用一个div实现m ...

随机推荐

  1. linux Sersync 上配置客户端

    1.安装 Rsync 并配置相关权限 在 SERSYNC 上配置 RSYNC 客户端相关权限认证: [root@SERSYNC /]# yum install rsync -y [root@SERSY ...

  2. [Luogu1220]关路灯(区间dp)

    [Luogu1220]关路灯 题目描述 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项工作就是每天早上天亮时一盏 ...

  3. 自定义日志注解 + AOP实现记录操作日志

      需求:系统中经常需要记录员工的操作日志和用户的活动日志,简单的做法在每个需要的方法中进行日志保存操作, 但这样对业务代码入侵性太大,下面就结合AOP和自定义日志注解实现更方便的日志记录   首先看 ...

  4. Centos7硬盘空间扩容(vmware虚拟机)

    1. 查看系统挂载点 df -h 2. 系统关机 init 0 硬盘1空间修改为100G,保存并启动 3.查看磁盘 fdisk -l /dev/sda空间加上去了 3. 硬盘分区 fdisk /dev ...

  5. DGA域名检测

    一.DGA域名原理 僵尸网络(Botnet):互联网上在蠕虫.木马.后门工具等,传统恶意代码形态的基础上发展.融合而产生的一种新型攻击方法. DNS(Domain Name System) :基于 U ...

  6. Linux学习-MySQL的主从复制高可用性解决方案MHA

    一.MHA简介 1.MHA Master High Availability,对主节点进行监控,可实现自动故障转移至其它从节点:通过提升某一从节点为新的主节点,基于主从复制实现,还需要客户端配合实现, ...

  7. window10 安装 docker

    0.打开Hyper-V. 安装成功后,查看“任务管理器”: 1.下载安装程序. 2.一路"next"安装.安装成功后,桌面会出现图标: 3.双击该图标,成功运行后,右小角出现: 右 ...

  8. 深圳市利汇电子商务科技有限公司2019年java面试笔试题

    垃圾公司,建议不要去,写的地址去了发现是两个公司公用一个办公场地,还没有公司的招牌,去了交简历给前台然后就是 填一份求职申请,一份笔试题如下,然后就等待,先是人事的一个小妹妹面试,问一些个人问题,为什 ...

  9. js中元素更新value页面体现不出来的原因

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. win7系统下安装Splash。

    参考地址:https://www.jianshu.com/p/4052926bc12c 期间遇到的问题: 关于virtualbox的问题: 启动虚拟机失败 http://www.cnblogs.com ...