1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>合并行</title> 6 <link href="layui/css/layui.css" rel="stylesheet" /> 7 </head> 8 <body> 9 <div class="box"> 10 <table class="layui-table" id="test" lay-data="{page:true,limit:50}" lay-filter="test"> 11 <thead> 12 <tr> 13 <th lay-data="{field:'province',200}">省</th> 14 <th lay-data="{field:'city',200}">市</th> 15 <th lay-data="{field:'zone',200}">区</th> 16 <th lay-data="{field:'username',200}">昵称</th> 17 <th lay-data="{field:'joinTime',150}">加入时间</th> 18 <th lay-data="{field:'sign',minWidth: 180}">签名</th> 19 <th lay-data="{field:'8',align:'right'}">基本操作</th> 20 </tr> 21 </thead> 22 <tbody> 23 <tr> 24 <td>浙江</td> 25 <td>杭州</td> 26 <td>西湖区</td> 27 <td>贤心1</td> 28 <td>2016-11-28</td> 29 <td>人生就像是一场修行 A</td> 30 <td> 31 <div class="layui-btn-group" style="overflow:visible;"> 32 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 33 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 34 </div> 35 </td> 36 </tr> 37 <tr> 38 <td>浙江</td> 39 <td>这个</td> 40 <td>西湖区</td> 41 <td>贤心2</td> 42 <td>2016-11-29</td> 43 <td>人生就像是一场修行 B</td> 44 <td> 45 <div class="layui-btn-group" style="overflow:visible;"> 46 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 47 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 48 </div> 49 </td> 50 </tr> 51 <tr> 52 <td>浙江</td> 53 <td>丽水</td> 54 <td>莲都区</td> 55 <td>贤心3</td> 56 <td>2016-11-30</td> 57 <td>人生就像是一场修行 C</td> 58 <td> 59 <div class="layui-btn-group" style="overflow:visible;"> 60 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 61 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 62 </div> 63 </td> 64 </tr> 65 <tr> 66 <td>浙江</td> 67 <td>丽水</td> 68 <td>莲都区</td> 69 <td>贤心3</td> 70 <td>2016-19-30</td> 71 <td>人生就像是一场修行 C</td> 72 <td> 73 <div class="layui-btn-group" style="overflow:visible;"> 74 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 75 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 76 </div> 77 </td> 78 </tr> 79 <tr> 80 <td>浙江</td> 81 <td>位置</td> 82 <td>莲都区</td> 83 <td>贤心3</td> 84 <td>2016-11-30</td> 85 <td>人生就像是一场修行 C</td> 86 <td> 87 <div class="layui-btn-group" style="overflow:visible;"> 88 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 89 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 90 </div> 91 </td> 92 </tr> 93 <tr> 94 <td>湖北</td> 95 <td>位置</td> 96 <td>莲都区</td> 97 <td>贤心3</td> 98 <td>2016-11-30</td> 99 <td>人生就像是一场修行 C</td> 100 <td> 101 <div class="layui-btn-group" style="overflow:visible;"> 102 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 103 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 104 </div> 105 </td> 106 </tr> 107 <tr> 108 <td>湖北</td> 109 <td>这个</td> 110 <td>1区</td> 111 <td>贤心3</td> 112 <td>2016-11-30</td> 113 <td>人生就像是一场修行 C</td> 114 <td> 115 <div class="layui-btn-group" style="overflow:visible;"> 116 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 117 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 118 </div> 119 </td> 120 </tr> 121 <tr> 122 <td>湖北</td> 123 <td>这个</td> 124 <td>1区</td> 125 <td>贤心3</td> 126 <td>2016-11-30</td> 127 <td>人生就像是一场修行 C</td> 128 <td> 129 <div class="layui-btn-group" style="overflow:visible;"> 130 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 131 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 132 </div> 133 </td> 134 </tr> 135 <tr> 136 <td>湖北</td> 137 <td>这个</td> 138 <td>1区</td> 139 <td>贤心3</td> 140 <td>2016-11-30</td> 141 <td>人生就像是一场修行 B</td> 142 <td> 143 <div class="layui-btn-group" style="overflow:visible;"> 144 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 145 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 146 </div> 147 </td> 148 </tr> 149 <tr> 150 <td>湖北</td> 151 <td>这个</td> 152 <td>1区</td> 153 <td>贤心</td> 154 <td>2016-11-30</td> 155 <td>人生就像是一场修行 B</td> 156 <td> 157 <div class="layui-btn-group" style="overflow:visible;"> 158 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 159 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 160 </div> 161 </td> 162 </tr> 163 <tr> 164 <td>湖北</td> 165 <td>这个</td> 166 <td>1区</td> 167 <td>贤心</td> 168 <td>2016-11-30</td> 169 <td>人生就像是一场修行 C</td> 170 <td> 171 <div class="layui-btn-group" style="overflow:visible;"> 172 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 173 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 174 </div> 175 </td> 176 </tr> 177 <tr> 178 <td>湖北</td> 179 <td>这个</td> 180 <td>1区</td> 181 <td>贤心</td> 182 <td>2016-11-30</td> 183 <td>人生就像是一场修行 D</td> 184 <td> 185 <div class="layui-btn-group" style="overflow:visible;"> 186 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a> 187 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a> 188 </div> 189 </td> 190 </tr> 191 </tbody> 192 </table> 193 </div> 194 195 <script src="layui/layui.js"></script> 196 <script src="Scripts/jquery-3.4.1.min.js"></script> 197 <script> 198 layui.use('table', function () { 199 var table = layui.table; 200 //var $ = layui.jquery;//引入jquery的模块 201 table.init('test', { 202 done: function (res, curr, count) { 203 layuiRowspan('province', 1); 204 layuiRowspan(['city', 'zone', 'username', 'joinTime', 'sign'], 1);//支持数组 205 layuiRowspan("8", 1, true); 206 } 207 }); 208 }) 209 210 var execRowspan = function (fieldName, index, flag) { 211 // 1为不冻结的情况，左侧列为冻结的情况 212 let fixedNode = index == "1" ? $(".layui-table-body")[index - 1] : (index == "3" ? $(".layui-table-fixed-r") : $(".layui-table-fixed-l")); 213 // 左侧导航栏不冻结的情况 214 let child = $(fixedNode).find("td"); 215 let childFilterArr = []; 216 // 获取data-field属性为fieldName的td 217 for (let i = 0; i < child.length; i++) { 218 if (child[i].getAttribute("data-field") == fieldName) { 219 childFilterArr.push(child[i]); 220 } 221 } 222 // 获取td的个数和种类 223 let childFilterTextObj = {}; 224 for (let i = 0; i < childFilterArr.length; i++) { 225 let childText = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent; 226 if (childFilterTextObj[childText] == undefined) { 227 childFilterTextObj[childText] = 1; 228 } else { 229 let num = childFilterTextObj[childText]; 230 childFilterTextObj[childText] = num * 1 + 1; 231 } 232 } 233 let canRowspan = true; 234 let maxNum;//以前列单元格为基础获取的最大合并数 235 let finalNextIndex;//获取其下第一个不合并单元格的index 236 let finalNextKey;//获取其下第一个不合并单元格的值 237 for (let i = 0; i < childFilterArr.length; i++) { 238 (maxNum > 9000 || !maxNum) && (maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : 9999); 239 let key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;//获取下一个单元格的值 240 let nextIndex = i + 1; 241 let tdNum = childFilterTextObj[key]; 242 let curNum = maxNum < tdNum ? maxNum : tdNum; 243 if (canRowspan) { 244 for (let j = 1; j <= curNum && (i + j < childFilterArr.length);) {//循环获取最终合并数及finalNext的index和key 245 finalNextKey = flag ? childFilterArr[i + j].innerHTML : childFilterArr[i + j].textContent; 246 finalNextIndex = i + j; 247 if ((key != finalNextKey && curNum > 1) || maxNum == j) { 248 canRowspan = true; 249 curNum = j; 250 break; 251 } 252 j++; 253 if ((i + j) == childFilterArr.length) { 254 finalNextKey = undefined; 255 finalNextIndex = i + j; 256 break; 257 } 258 } 259 childFilterArr[i].setAttribute("rowspan", curNum); 260 if ($(childFilterArr[i]).find("div.rowspan").length > 0) {//设置td内的div.rowspan高度适应合并后的高度 261 $(childFilterArr[i]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent"); 262 $(childFilterArr[i]).find("div.layui-table-cell")[0].style.height = curNum * 38 - 10 + "px"; 263 } 264 canRowspan = false; 265 } else { 266 childFilterArr[i].style.display = "none"; 267 } 268 if (--childFilterTextObj[key] == 0 | --maxNum == 0 | --curNum == 0 | (finalNextKey != undefined && nextIndex == finalNextIndex)) {//||(finalNextKey!=undefined&&key!=finalNextKey) 269 canRowspan = true; 270 } 271 } 272 } 273 //合并数据表格行 274 var layuiRowspan = function (fieldNameTmp, index, flag) { 275 let fieldName = []; 276 if (typeof fieldNameTmp == "string") { 277 fieldName.push(fieldNameTmp); 278 } else { 279 fieldName = fieldName.concat(fieldNameTmp); 280 } 281 for (let i = 0; i < fieldName.length; i++) { 282 execRowspan(fieldName[i], index, flag); 283 } 284 } 285 286 </script> 287 </body> 288 </html>