layui 多表头列一对一显示问题
作者：互联网
layui 多表的一对一显示列对不齐（colspan>1不存在这个问题）
主要解决方式是判断出colspan =1 也就是一对一的情况下才用这样的方式，这里只解决二级表头（三级表头可以看二级表头自己推写）
1 [[//一级表头
2 { rowspan: 2, title: '联系人', field: 'classify'},
3 {title: '地址1',colspan:'1',field: 'classify'},
4 {title: '地址1',colspan:'1',field: 'city'},
5 {title: '地址1',colspan:'1',field: 'sign'},
6 { rowspan: 2, title: '操作', field: 'score'}
7 ],二级表头
8 [
9 {title: '省', field: 'classify',colGroup: 1},
10 { title: '市', field: 'city',colGroup: 1},
11 { title: '区', field: 'sign',colGroup: 1}
12 ]]
View Code
主要区别是一对一的情况下：一级表头加属性field: 'classify'（绑定数据列），二级表头加属性colGroup: 1（隐藏数据列）。这两个属性自己可以试下去掉和加上的区别
下面这段代码可以直接粘贴到测试网页里运行看效果
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>Layui</title>
6 <meta name="renderer" content="webkit">
7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
8 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
9 <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
10 <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
11 </head>
12 <body>
13
14 <table class="layui-hide" id="demo" lay-filter="test"></table>
15
16 <script type="text/html" id="barDemo">
17 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>
18 <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>
19 </script>
20 <p style="color: #999">注：上述例子读取的均是静态模拟数据</p>
21
22
23 <script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
24 <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
25 <script>
26
27 layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
28 var laydate = layui.laydate //日期
29 ,laypage = layui.laypage //分页
30 ,layer = layui.layer //弹层
31 ,table = layui.table //表格
32 ,carousel = layui.carousel //轮播
33 ,upload = layui.upload //上传
34 ,element = layui.element //元素操作
35 ,slider = layui.slider //滑块
36
37 //向世界问个好
38 layer.msg('Hello World');
39
40 //监听Tab切换
41 element.on('tab(demo)', function(data){
42 layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
43 tips: 1
44 });
45 });
46
47 //执行一个 table 实例
48 table.render({
49 elem: '#demo'
50 ,height: 420
51 ,url: '/demo/table/user/' //数据接口
52 ,title: '用户表'
53 ,page: true //开启分页
54 ,toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
55 ,totalRow: true //开启合计行
56 ,cols: [[
57 { rowspan: 2, title: '联系人', field: 'classify'},
58 {title: '地址1',colspan:'1',field: 'classify'},
59 {title: '地址1',colspan:'1',field: 'city'},
60 {title: '地址1',colspan:'1',field: 'sign'},
61 { rowspan: 2, title: '操作', field: 'score'}
62 ],
63 [
64 {title: '省', field: 'classify',colGroup: 1},
65 { title: '市', field: 'city',colGroup: 1},
66 { title: '区', field: 'sign',colGroup: 1}
67 ]]
68 ,done:function(res,curr,count){
69 $(".layui-table-body").find("td").each(function(index,element){
70 if($(this).attr("data-field")>0){
71 $(this).css("display","none")
72 }
73 })
74 }
75 });
76 });
77 </script>
78
79 </body>
80 </html>
View Code
上面这个网址是layui官网demo在线测试地址，可以把如上代码直接复制粘贴看效果
标签：title,一对一,layui,colGroup,表头,field,colspan 来源： https://www.cnblogs.com/MycnBlogs7854/p/13093311.html