layui table+複雜表頭+合併單元格
效果圖：javascript
問題：行hover效果感受錯亂 因此改成透明色css
代碼：html
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 {align:'center',rowspan:2,field:'inspectContentNumber', title:'表頭'}, 202 {align:'center',rowspan:2,field:'inspectContent', title:'表頭'}, 203 {align:'center',rowspan:2,field:'standard', title:'表頭'}, 204 {align:'center',rowspan:2,field:'explains', title:'表頭'}, 205 {align:'center',rowspan:2,field:'qualityStatus', title:'結果',templet: function (d) { 206 if(d.qualityStatus == null){ 207 return '<select name="qualityStatus" lay-filter="testSelect" lay-verify="required" >' + 208 ' <option value="0" selected>合格</option>' + 209 ' <option value="1">不合格</option>' + 210 ' </select>'; 211 } 212 213 }}, 214 {align:'center',rowspan:2,field:'certificateNumber', title:'表頭',templet: function (d) { 215 if(d.certificateNumber==null || d.certificateNumber==''){ 216 return '無' 217 }else{ 218 return d.certificateNumber 219 } 220 }}, 221 {align:'center',rowspan:2,field:'undetectedCount', title:'表頭'}, 222 {align:'center',field:'resultNum', title:'表頭',colspan:3}, 223 {align:'center',rowspan:2,field:'qualityTestedInAmount', title:'表頭'}, 224 {align:'center',rowspan:2,field:'manufacturer', title:'表頭'}, 225 {align:'center',rowspan:2,field:'certificate', title:'表頭', templet: function (d) { 226 return '<span class="layui-breadcrumb" lay-separator="|">' + 227 '<a href="javascript:;" lay-event="qua_standard_edit">添加附件</a>' + 228 '</span>'; 229 },fixed:'right'}, 230 {align:'center',rowspan:2,width:100,field: 'operation', title: '操做', templet: function (d) { 231 return '<span class="layui-breadcrumb" lay-separator="|">' + 232 '<a href="javascript:;" lay-event="qua_standard_del">刪除</a>' + 233 '</span>'; 234 },fixed:'right'} 235 ], 236 [ 237 {align:'center',field:'qualified', title:'表頭', edit: 'number'}, 238 {align:'center',field:'disqualification', title:'表頭', edit: 'number'}, 239 {align:'center',field:'concession', title:'表頭', edit: 'number'}, 240 ] 241 ], 242 done: function (res, curr, count) { 243 element.init(); 244 $('#qua_standard_table').siblings('div').find('dl').find('.layui-this').click();//模擬點擊 初始化數據 245 merge(res);//合併單元格 246 } 247 }); 248 249 $('#receiptForm1').on('keyup','.layui-table-edit',function () { 250 this.value=this.value.replace(/^(0+)|[^\d]+/g,'')//TODO 251 }); 252 253 //行事件 254 table.on('tool(qua_standard_table)', function(obj){ 255 256 if(obj.event === 'qua_standard_edit'){ 257 layer.msg('添加') 258 }else if(obj.event === 'qua_standard_del'){ 259 layer.msg('刪除') 260 } 261 }); 262 263 }); 264 //layui 結束 265 266 //合併開始 267 function merge(res) { 268 var data = res.data; 269 var mergeIndex = 0;//定位須要添加合併屬性的行數 270 var mark = 1; //這裏涉及到簡單的運算，mark是計算每次須要合併的格子數 271 var _number = 1;//保持序號列數字遞增 272 var columsName = ['num','number','typeName','projectName','unit','suppliedNum','qualified','disqualification','concession','sum','manufacturer','certificate','operation'];//須要合併的列名稱 273 var columsIndex = [0,2,3,4,5,12,13,14,15,16,17,18,19];//須要合併的列索引值 274 var mergeCondition = 'id';//須要合併的 首要條件 在這個前提下進行內容相同的合併 275 var tdArrL = $('.layui-table-fixed-l > .layui-table-body').find("tr");//序號列左定位產生的table tr 276 var tdArrR = $('.layui-table-fixed-r > .layui-table-body').find("tr");//操做列定右位產生的table tr 277 278 for (var k = 0; k < columsName.length; k++) { //這裏循環全部要合併的列 279 var trArr = $(".layui-table-main>.layui-table").find("tr");//全部行 280 for (var i = 1; i < res.data.length; i++) { //這裏循環表格當前的數據 281 282 if (data[i][mergeCondition] === data[i-1][mergeCondition]) { 283 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//獲取當前行的當前列 284 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//獲取相同列的第一列 285 286 if (data[i][columsName[k]] === data[i-1][columsName[k]]) { //後一行的值與前一行的值作比較，相同就須要合併 287 mark += 1; 288 tdPreArr.each(function () {//相同列的第一列增長rowspan屬性 289 $(this).attr("rowspan", mark); 290 }); 291 tdCurArr.each(function () {//當前行隱藏 292 $(this).css("display", "none"); 293 }); 294 }else { 295 mergeIndex = i; 296 mark = 1;//一旦先後兩行的值不同了，那麼須要合併的格子數mark就須要從新計算 297 } 298 } else { 299 mergeIndex = i; 300 mark = 1;//一旦先後兩行的值不同了，那麼須要合併的格子數mark就須要從新計算 301 } 302 303 304 } 305 mergeIndex = 0; 306 mark = 1; 307 } 308 309 310 311 312 313 //操做左右定位列的表格 314 $.each($("#qua_standard_table").siblings('.layui-table-view').find('.layui-table-main>.layui-table').find("tr"),function (i,v) { 315 if ($(v).find('td').eq(2).css('display') === 'none') { 316 tdArrL.eq(i).find('td').css('display','none'); 317 tdArrR.eq(i).find('td').css('display','none'); 318 } else { 319 tdArrL.eq(i).find('td').find('.laytable-cell-numbers').html(_number++); 320 tdArrL.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight); 321 tdArrR.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientHeight); 322 323 } 324 }) 325 326 327 328 } 329 //合併結束 330 </script> 331 </html>
相關文章
- 1. Layui表格-複雜表頭
- 2. LayUI Table複雜表頭實現
- 3. Datatables js 複雜表頭 合併單元格
- 4. Bootstrap-table 單元格合併 、表頭合併
- 5. 複雜的POI導出Excel表格（多行表頭、合併單元格）
- 6. layui table表格單元格動態合併，並設置隔行變色
- 7. Html Table 合併單元格
- 8. table 合併單元格
- 9. table 合併單元格 (dom)
- 10. Gitbook/Markdown中插入複雜（合併單元格）的表格
- 更多相關文章...
- • XSD 複合元素 - XML Schema 教程
- • jQuery Mobile 表格 - jQuery Mobile 教程
- • 算法總結-歸併排序
- • IntelliJ IDEA代碼格式化設置
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
