layui数据表格跨行自动合并

  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>
相关阅读:
Linux入门第三天——more,less,head,tail,ls 用户权限
 linux 入门第一天
 python入门第八天摘自--廖雪峰python课程
 python入门第七天
 匿名函数
 返回函数
 高阶函数之filter 和 sorted
map，reduce高阶函数
 高阶函数巩固
 装饰器
原文地址：https://www.cnblogs.com/lgx5/p/15116027.html