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 ]]
主要区别是一对一的情况下：一级表头加属性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>
上面这个网址是layui官网demo在线测试地址，可以把如上代码直接复制粘贴看效果