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: DoOnMsoNumberFormat18 },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',
12 3 432 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('5 8 9 12 13 16 17 1819 20 2130
31' + descKey[key] + ': ' + value + '
')49 }50 51 })52 return html.join('')53 }
2 checkbox的使用
1.1基本功能1.2 **检测1.3 **选源
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);