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在線測試地址，可以把如上代碼直接復制粘貼看效果