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>