前端页面
1 bootstrap-table插件使用
https://examples.bootstrap-table.com/#extensions/reorder-rows.html
https://examples.bootstrap-table.com/#extensions/accent-neutralise.html#view-source
初始化表格 $('#id_TableConfigItem').bootstrapTable({ data: [] })
更新数据 $('#id_TableConfigItem').bootstrapTable('load', data);
隐藏某一列 $('#table_task').bootstrapTable('hideColumn', 'cardid');
刷新按钮实现
1 $(function () { 2 3 $("#table_task").bootstrapTable({ 4 pagination: true, //是否显示分页（*） 5 pageSize: 15, //每页的记录行数（*） 6 pageList: [10, 15, 20, 30, 50, 100], //可供选择的每页的行数（*） 7 8 showRefresh: true, 9 toolbar: '#toolbar', 10 exportTypes:['excel','txt'], //导出文件类型 11 exportOptions:{ 12 ignoreColumn: [0,1], //忽略某一列的索引 13 fileName: '时钟ST用例测试结果', //文件名称设置 14 worksheetName: 'sheet1', //表格工作区名称 15 tableName: '结果', 16 excelstyles: ['background-color', 'color', 'font-size', 'font-weight'], 17 //onMsoNumberFormat: DoOnMsoNumberFormat 18 }, 19 columns: [ 20 { checkbox: true }, 21 { field: 'id', title: '序号', width: 50, align: "center" , sortable: true }, 22 { field: 'cardid', title: '用户', width: 50, align: "center" , sortable: true }, 23 { field: 'projectName', title: '测试项目', width: 100, align: "center" , sortable: true }, 24 { field: 'caseName', title: '测试用例', width: 600, align: "left" }, 25 { field: 'status', title: '执行状态', width: 150, align: "center", 26 cellStyle:function(value,row,index){ 27 if (value=="新创建"){ return {css:{"background-color":"#FFE4B5", "color":"black" }} 28 }else if (value=="执行完毕"){ return {css:{"background-color":"#96CDCD", "color":"black"}} 29 }else if (value=="执行中"){ return {css:{"background-color":"#6B8E23", "color":"black"}} 30 }else if (value=="排队中"){ return {css:{"background-color":"#FA87da", "color":"black"}} 31 }else if (value=="已暂停"){ return {css:{"background-color":"#FFFF00", "color":"black"}} 32 } 33 } 34 }, 35 { field: 'starttime', title: '开始时间', width: 250, align: "center" }, 36 { field: 'endtime', title: '结束时间', width: 250, align: "center" }, 37 { field: 'success', title: '测试结果', width: 200, align: "center", 38 cellStyle:function(value,row,index){ 39 if (value=="失败"){ 40 return {css:{"color":"#FA8072"}} 41 }else if (value=="成功"){ 42 return {css:{"color":"#32CD32"}} 43 }else if (value=="未知"){ 44 return {} 45 } 46 } 47 }, 48 { field: 'message', title: '备注', width: 400, align: "center" }, 49 { field: 'logpath', title: '日志', width: 100, align: "center" }, 50 ], 51 52 onRefresh:function () { 53 freshData() 54 } 55 56 }); 57 $('#table_task').bootstrapTable('hideColumn', 'cardid'); 58 59 batchExecuteImpl(); 60 batchPauseImpl(); 61 batchDeleteImpl(); 62 63 freshData(); 64 65 })
工具栏toolbar在左侧，以及展开数据细节，在初始化表格时需要设置 toolbar: '#toolbar',
1 <div class="container" style="width: 100%;height: 100%;margin-top:0; "> 2 3 <!-- bootstrap-tablel指定的工具栏 --> 4 <div id="toolbar" class="btn-group" > 5 <button id="btn-exe" type="button" class="btn btn-primary"> 6 <span class="glyphicon glyphicon-play" aria-hidden="true"></span>批量执行 7 </button> 8 9 <button id="btn-pause" type="button" class="btn btn-success"> 10 <span class="glyphicon glyphicon-stop" aria-hidden="true"></span>暂停 11 </button> 12 13 <button id="btn-delete" type="button" class="btn btn-danger"> 14 <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>批量删除 15 </button> 16 17 <p id="taskWarnInfo" style="float: left; color: #6f42c1; margin-left: 40px; display: none;"> 项目名称存在，请重新命名！</p> 18 </div> 19 20 21 <table id="table_task" 22 data-search="true" 23 data-search-accent-neutralise="true" 24 data-show-columns="true" 25 data-toolbar-align="left" 26 data-search-align="right" 27 data-show-export="true" 28 data-detail-view="true" 29 data-detail-formatter="detailFormatter" > 30 </table> 31 </div> 32 33 34 35 36 var descKey = { 37 "id" : "序号" , "projectName" : "测试项目", "caseName" : "测试用例", "caseType" : "用例编号", 38 "createtime" : "用例创建时间", "starttime" : "执行开始时间", "endtime" : "执行结束时间", 39 "status" : "执行状态", "success" : "测试结果", "message" : "备注", 40 "logpath": "日志" , "logname" : "日志名称", 41 "DTA" : "DTA配置" , "DTB" : "DTB配置" , "DTC" : "DTC配置" 42 } 43 44 function detailFormatter(index, row) { 45 var html = [] 46 $.each(row, function (key, value) { 47 if(descKey[key]!=null){ 48 html.push('<p><b>' + descKey[key] + ':</b> ' + value + '</p>') 49 } 50 51 }) 52 return html.join('') 53 }
2 checkbox的使用
<script type="text/javascript">
<!-- 获取项目名称 -->
var projectname = "[[@{/}]]";
projectname = projectname.split("/")[1];
projectname = "/"+projectname;
$(function() {
<!--对所有synccheckbox -->
$("#selectAllSyncCheckBox").click(function(){//给全选按钮加上点击事件
var checkedItem = $(this).prop("checked");//判断全选按钮的选中状态
$(".syncCheckBox").prop("checked",checkedItem); //让class名为syncCheckBox的选项的选中状态和全选按钮的选中状态一致。
})
<!--对所有ptpcheckbox -->
$("#selectAllPtpCheckBox").click(function(){
var checkedItem = $(this).prop("checked");
$(".ptpCheckBox").prop("checked",checkedItem);
})
<!--对所有checkbox -->
$("#selectAllCheckBox").click(function(){
var checkedItem = $(this).prop("checked");
$("#selectAllSyncCheckBox").prop("checked",checkedItem); // 二级
$(".syncCheckBox").prop("checked",checkedItem); // 三级
$("#selectAllPtpCheckBox").prop("checked",checkedItem); // 二级
$(".ptpCheckBox").prop("checked",checkedItem); // 三级
})
$('#id_TableConfigItem').bootstrapTable({
data: []
})
});
关于嵌套checkbox代码示例
<div id="collapseAll" class="panel-collapse collapse in" >
<div class="panel-body" >
<!--嵌套 物理层-->
<div class="panel-group" id="accordionSync">
<div class="panel panel-default">
<div class="panel-heading" style="width: 100%;height: 100%;text-align: left">
<h4 class="panel-title">
<input type="checkbox" id="selectAllSyncCheckBox" value="0" style="width: 20px;height: 16px" >
<a data-toggle="collapse" data-parent="#accordionSync" href="#collapseSync_physical" >
<span style=""> 1.***同步</span>
</a>
</h4>
</div>
<div id="collapseSync_physical" class="panel-collapse collapse " style="text-align: left;">
<div class="panel-body" >
<input type="checkbox" value="101" class="syncCheckBox" style="width: 20px;height: 16px;color: whitesmoke"> 1.1基本功能
</div>
<div class="panel-body" >
<input type="checkbox" value="102" class="syncCheckBox" style="width: 20px;height: 16px"> 1.2 **检测
</div>
<div class="panel-body" >
<input type="checkbox" value="103" class="syncCheckBox" style="width: 20px;height: 16px"> 1.3 **选源
</div>
</div>
</div>
</div>
function initSelectedBox(){
$("#selectAllCheckBox").prop("checked",false);
$("#selectAllSyncCheckBox").prop("checked",false); // 二级
$(".syncCheckBox").prop("checked",false); // 三级
$("#selectAllPtpCheckBox").prop("checked",false); // 二级
$(".ptpCheckBox").prop("checked",false); // 三级
arrChoosenCases = [];
$('#id_TableConfigItem').bootstrapTable('load', []);
}
https://www.cnblogs.com/junjieok/p/4107066.html
checkbox全选
https://www.cnblogs.com/xiaofox0018/p/6243723.html
json 格式化输出 https://blog.csdn.net/qq_37788558/article/details/78551562
-
JSON.stringify(jsObj, null, "\t"); // 缩进一个tab
-
JSON.stringify(jsObj, null, 4); // 缩进4个空格
将字符串中单引号替换成双引号：
var v = "123'456'789";
v = v.replace(/'/g, '"');
alert(v);
