layui数据表格跨行自动合并

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了layui数据表格跨行自动合并，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10724字，纯文字阅读大概需要16分钟。

内容图文

              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>
194195     <script src="layui/layui.js"></script>
196     <script src="Scripts/jquery-3.4.1.min.js"></script>
197     <script>
198         layui.use(‘table‘, function () {
199var 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        })
209210var 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的td217for (let i = 0; i < child.length; i++) {
218if (child[i].getAttribute("data-field") == fieldName) {
219                    childFilterArr.push(child[i]);
220                }
221            }
222// 获取td的个数和种类223             let childFilterTextObj = {};
224for (let i = 0; i < childFilterArr.length; i++) {
225                 let childText = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
226if (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;//获取其下第一个不合并单元格的index236             let finalNextKey;//获取其下第一个不合并单元格的值237for (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;
243if (canRowspan) {
244for (let j = 1; j <= curNum && (i + j < childFilterArr.length);) {//循环获取最终合并数及finalNext的index和key245                         finalNextKey = flag ? childFilterArr[i + j].innerHTML : childFilterArr[i + j].textContent;
246                         finalNextIndex = i + j;
247if ((key != finalNextKey && curNum > 1) || maxNum == j) {
248                             canRowspan = true;
249                             curNum = j;
250break;
251                        }
252                         j++;
253if ((i + j) == childFilterArr.length) {
254                             finalNextKey = undefined;
255                             finalNextIndex = i + j;
256break;
257                        }
258                    }
259                     childFilterArr[i].setAttribute("rowspan", curNum);
260if ($(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                }
268if (--childFilterTextObj[key] == 0 | --maxNum == 0 | --curNum == 0 | (finalNextKey != undefined && nextIndex == finalNextIndex)) {//||(finalNextKey!=undefined&&key!=finalNextKey)269                     canRowspan = true;
270                }
271            }
272        }
273//合并数据表格行274var layuiRowspan = function (fieldNameTmp, index, flag) {
275             let fieldName = [];
276if (typeof fieldNameTmp == "string") {
277                fieldName.push(fieldNameTmp);
278             } else {
279                 fieldName = fieldName.concat(fieldNameTmp);
280            }
281for (let i = 0; i < fieldName.length; i++) {
282                execRowspan(fieldName[i], index, flag);
283            }
284        }
285286     </script>
287 </body>
288 </html>

原文：https://www.cnblogs.com/lgx5/p/15116027.html

内容总结

以上是互联网集市为您收集整理的layui数据表格跨行自动合并全部内容，希望文章能够帮你解决layui数据表格跨行自动合并所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1224151.html

来源：【匿名】

【下一篇】PHP+MySQL+LayUI分页查询显示

更多 ►

【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‘,width:200}"...

Layui数据表格用法【代码】【图】

在这里介绍一下layui数据表格的简单使用，并介绍所踩的坑首先封装一个类，将数据表格所需要的属性封装在这里 1publicclass MsgJson<T> where T:class,new()2 {3//错误提示代号 4publicint code { get; set; }5//错误提示消息 6publicstring msg { get; set; }7//表格中的记录总数 8publicint count { get; set; }9//表格中的所有记录10public IEnumerable<T> data { get; set; } 11 }在Controller中创建一个ActionResult类方...

使用webapi绑定layui数据表格完整增删查改记录

因为每次给layui数据表格绑定数据或者类似操作的时候总要重新做一遍而且忘记很多东西所以干脆写博客把相关东西记录下来便于查阅和修正以下是一个完整的数据表格i项目的增删改查案例先来看后台LayuiContext db = new LayuiContext(); Result res = null; #region 分页查询/查询参数为姓名/性别/班级利用if添加判断条件 [HttpGet] public IHttpActionResult StudentList2(int page, int limit, s...

后台返回数据渲染Layui表格【代码】

1、layui表格数据返回的格式是有限制的，这时候可以自己定义一个类来接收数据库查出来的结果然后再来渲染layui表格，下面自己定义一个类,这个类定义了两个方法publicclass JsonToken {publicint code;public String msg;public Object data;publicint count;publicint pages; //返回数据符合layui需要的数据格式；第一个是状态码，0表示成功，第二个是提示信息，第三个是要返回的数据，第四个是数据的总数量public JsonToken(int c...

00010 - layui 表格table 高度自适应充满页面

var tableIns = table.render({elem:‘#taskOptLogListTable‘,url: ctx+‘/task/taskOptLog/query‘,error:admin.error,cellMinWidth: 80,toolbar: ‘#taskOptLogListTable-toolbar‘,defaultToolbar: [{title: ‘条件过滤‘ //标题,layEvent: ‘searchDiv‘ //事件名，用于 toolbar 事件中使用,icon: ‘layui-icon-search‘ //图标类名},‘filter‘, ‘print‘, ‘exports‘],cols: [[{field:‘userName‘, title: ‘操作人‘, a...

Layui我提交表单时，table.reload(),表格会请求2次，是为什么？

重载两次是因为搜索按钮用的是button改成<a class="layui-btn" data-type="reload">搜索</a>就可以了虽然我也不知道是什么原因原文：https://www.cnblogs.com/uzxin/p/11907012.html

datatable转layui表格【偏原理】

如题这个类负责把datatable转换为layui表格可以显示的内容。适合配合表格url字段的webapi服务端，为其返回响应字符串。代码如下：using System;using System.Web;using System.Text;using System.Data;using System.Net.Http;namespace MyClass{ public class Layui_helper { static string datatable2json(DataTable table) { StringBuilder jsonBuilder = new StringBuilder(); jsonB...

00028-layui 表单有子列表，如何动态新增和保存（表格table行编辑）？【代码】

html: <div ><div ><div >资料清单</div><div ><table lay-filter="serviceMaterialListTable"></table><script type="text/html" ><div ><button data-type="addMaterial">添加</button></div></script><script type="text/html" ><%--<a lay-event="editMaterial">编辑</a>--%><a lay-event="delMaterial">删除</a></script><script type="text/html" ><select name="type" lay-filter="service_material_type" autocompl...

layui中数据表格table 获取后台对象中包含的对象数据

table.render({ elem: #test ,url:userManager/doList?userName=+name ,cols: [[ {field:userId, title:ID, width:80, fixed: left, unresize: true, sort: true} ,{field:userName, title:用户名称, width:150} ,{field:userCode, title:用户编号, width:150} ,{field:phone, title:联系电话, width:150} ,{field:dm...

layui 数据表格点击分页按钮监听事件的实例【图】

找了很多关于表格分页点击事件请求， table.render 并不支持监听点击事件,所以我就把 table.render 和 laypage.render结合在一起（我也不想写分页的，但是后台讲数据多，要加分页，被逼无奈，想了一个方法）先上图代码 .html <div><table class="layui-hide" id="test" lay-filter="demo"></table><div id="page"></div> </div>.js //页面第一次请求默认 1页 10条 function dataLists(pageNum, numPerPage) {$.post(Url +...

解决layui表格内文本超出隐藏的问题【图】

只需要更改样式即可图片：代码如下 .layui-table-cell{height:auto;overflow:visible;text-overflow:inherit; 以上这篇解决layui表格内文本超出隐藏的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

layui问题之渲染数据表格时,仅出现10条数据的解决方法

一、问题 ajax获取服务端数据之后，要动态渲染table，但数据仅仅数显了10条，并没有渲染所有的数据。二、经过看一下表格需要的数据，0-9条的数据都自动有一个名为LAY_TABLE_INDEX的键值对，但10条及之后的数据都没有这个键值对。很是纳闷，这个表格不带分页功能，应该不需要写limit对数据进行限制 table.render({elem: #orderTable,height: 400,cols: [[ //标题栏{field: status, title: "订单状态", width: 90},{field: orderS...

浅谈layui 数据表格前后台传值的问题【图】

1.1查询<script>layui.use(table, function() {var table = layui.table;table.render({elem : #demo,url : controller路径,{ field: id,title: id},{ field: username,title: 用户名},{ field: sex,title: 性别}, { field: city,title: 城市}],//field是实体类属性even : true,page : true, //是否显示分页limits : [ 5, 10 ], //控制多少行一页（默认五条一页）limit : 5 //每页默认显示的数量});});</script><table class="layu...

layui实现把数据表格时间戳转换为时间格式的例子【图】

如下所示： <script type="text/javascript"> function createTime(v){var date = new Date(v);var y = date.getFullYear();var m = date.getMonth()+1;m = m<10?0+m:m;var d = date.getDate();d = d<10?("0"+d):d;var h = date.getHours();h = h<10?("0"+h):h;var M = date.getMinutes();M = M<10?("0"+M):M;var str = y+"-"+m+"-"+d+" "+h+":"+M;return str; } </script>table.render({elem: #LAY_table_user,url:"<%=path%>/myb...

layui点击数据表格添加或删除一行的例子

数据表格 t2 = {elem: #test2,data: tableData2,page: false,width: $(parent.window).width()-50,cols: [[{type:checkbox,field:id},{field:cstMoldNo, title: 客户模号,edit:text},{field:cstProdName, title: 产品名称,edit:text},{field:material, title: 产品材料,edit:text},{field:firstTryDate, title: 验证日期,edit:text},{field:deliveryDate, title: 交货日期,edit:text},{field:unit, title: 单位,edit:text},{field:...