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',
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 2122 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
31' + descKey[key] + ': ' + value + '
') 49 } 50 51 }) 52 return html.join('') 53 }
2 checkbox的使用