效果圖: 問題:行hover效果感覺錯亂 所以改為透明色 代碼: ...
效果圖:
問題:行hover效果感覺錯亂 所以改為透明色
代碼:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>複雜表頭+select下拉框預設值+單元格合併</title> 6 <script src="../../../static/lib/layui/layui.js" charset="utf-8"></script> 7 <style> 8 /*select下拉框顯示*/ 9 td[data-field="qualityStatus"]>div { 10 overflow: inherit; 11 } 12 /*去除行點擊、hover背景色*/ 13 .layui-table tbody tr:hover , .layui-table-hover , .layui-table-click{ 14 background-color: rgba(255,255,255,0); 15 } 16 </style> 17 </head> 18 <body> 19 <div class="layui-fluid"> 20 <div class="layui-row layui-col-space15"> 21 <div class="layui-col-md12"> 22 <div class="layui-card"> 23 <div class="layui-card-body"> 24 <table class="layui-hide" id="qua_standard_table" lay-filter="qua_standard_table"></table> 25 </div> 26 </div> 27 </div> 28 </div> 29 </div> 30 </body> 31 <script> 32 layui.use(['element','upload','laydate','table','form'], function(){ 33 var element = layui.element 34 ,table = layui.table, 35 laypage = layui.laypage, 36 form = layui.form, 37 upload = layui.upload, 38 laydate = layui.laydate; 39 //模擬數據 40 var selectdata = [ 41 { 42 amountOfMoney: 5000, 43 basicMeasurement: "kg", 44 certificateNumber: "內容15", 45 concession: null, 46 contentId: null, 47 disqualification: null, 48 explains: "內容67", 49 files: null, 50 id: 2, 51 inspectContent: "內容22", 52 inspectContentNumber: "內容0000", 53 inspector: null, 54 inspectorDate: null, 55 inspectorDescription: null, 56 isNumber: null, 57 main: null, 58 manufacturer: "內容44", 59 materialId: 14, 60 materialName: "內容4", 61 materialNo: "內容一", 62 materialSize: "2*3", 63 meId: null, 64 orderAmount: 100, 65 orderId: 1, 66 orderPrice: 20, 67 orderedInAmount: 0, 68 projectName: "其他", 69 purchaseMeasurement: "kg", 70 qualified: null, 71 qualityStatus: null, 72 qualityTestedInAmount: 9, 73 standard: "內容11", 74 undetectedCount: 91, 75 }, 76 { 77 amountOfMoney: 5000, 78 basicMeasurement: "kg", 79 certificateNumber: "內容14", 80 concession: null, 81 contentId: null, 82 disqualification: null, 83 explains: "內容66", 84 files: null, 85 id: 2, 86 inspectContent: "內容33", 87 inspectContentNumber: "內容1111", 88 inspector: null, 89 inspectorDate: null, 90 inspectorDescription: null, 91 isNumber: null, 92 main: null, 93 manufacturer: "內容44", 94 materialId: 14, 95 materialName: "內容4", 96 materialNo: "內容一", 97 materialSize: "2*3", 98 meId: null, 99 orderAmount: 100, 100 orderId: 1, 101 orderPrice: 20, 102 orderedInAmount: 0, 103 projectName: "其他", 104 purchaseMeasurement: "kg", 105 qualified: null, 106 qualityStatus: null, 107 qualityTestedInAmount: 9, 108 standard: "內容001", 109 undetectedCount: 91, 110 }, 111 { 112 amountOfMoney: 5000, 113 basicMeasurement: "kg", 114 certificateNumber: "內容15", 115 concession: null, 116 contentId: null, 117 disqualification: null, 118 explains: "內容67", 119 files: null, 120 id: 1, 121 inspectContent: "內容22", 122 inspectContentNumber: "內容0000", 123 inspector: null, 124 inspectorDate: null, 125 inspectorDescription: null, 126 isNumber: null, 127 main: null, 128 manufacturer: "內容45", 129 materialId: 13, 130 materialName: "內容3", 131 materialNo: "內容二", 132 materialSize: "2*3", 133 meId: null, 134 orderAmount: 100, 135 orderId: 1, 136 orderPrice: 20, 137 orderedInAmount: 0, 138 projectName: "其他", 139 purchaseMeasurement: "kg", 140 qualified: null, 141 qualityStatus: null, 142 qualityTestedInAmount: 12, 143 standard: "內容11", 144 undetectedCount: 88, 145 }, 146 { 147 amountOfMoney: 5000, 148 basicMeasurement: "kg", 149 certificateNumber: "內容14", 150 concession: null, 151 contentId: null, 152 disqualification: null, 153 explains: "內容66", 154 files: null, 155 id: 1, 156 inspectContent: "內容33", 157 inspectContentNumber: "內容1111", 158 inspector: null, 159 inspectorDate: null, 160 inspectorDescription: null, 161 isNumber: null, 162 main: null, 163 manufacturer: "內容45", 164 materialId: 13, 165 materialName: "內容3", 166 materialNo: "內容二", 167 materialSize: "2*3", 168 meId: null, 169 orderAmount: 100, 170 orderId: 1, 171 orderPrice: 20, 172 orderedInAmount: 0, 173 projectName: "其他", 174 purchaseMeasurement: "kg", 175 qualified: null, 176 qualityStatus: null, 177 qualityTestedInAmount: 12, 178 standard: "內容001", 179 undetectedCount: 88, 180 } 181 ] 182 183 //主頁面數據 184 table.render({ 185 elem: '#qua_standard_table', 186 id:'qua_standard_table', 187 //url:'', 188 data:selectdata, 189 method:'POST', 190 title: '數據表', 191 height: 'full-60', 192 cellMinWidth: 120, 193 size: 'lg', 194 cols:[[ 195 {align:'center',rowspan:2, title:'序號',width:100,type:'numbers',field: 'num',fixed:'left'}, 196 {align:'center',rowspan:2,field: 'id', title: 'ID',hide:true},//隱藏列 197 {align:'center',rowspan:2,field:'materialNo', title:'表頭',width:100}, 198 {align:'center',rowspan:2,field:'materialName', title:'表頭'}, 199 {align:'center',rowspan:2,field:'projectName', title:'表頭'}, 200 {align:'center',rowspan:2,field:'purchaseMeasurement', title:'表頭'}, 201