其他分享
首页 > 其他分享> > layui 多表头列一对一显示问题

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

https://www.layui.com/demo/ 

上面这个网址是layui官网demo在线测试地址,可以把如上代码直接复制粘贴看效果

标签:title,一对一,layui,colGroup,表头,field,colspan
来源: https://www.cnblogs.com/MycnBlogs7854/p/13093311.html