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',width:200}">省</th>
14 <th lay-data="{field:'city',width:200}">市</th>
15 <th lay-data="{field:'zone',width:200}">区</th>
16 <th lay-data="{field:'username',width:200}">昵称</th>
17 <th lay-data="{field:'joinTime',width: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>
浙公网安备 33010602011771号