Layui复杂表头用法介绍

本文将介绍如何使用Layui实现复杂表头，包含多行多列表头和合并单元格等功能。

一、多行多列表头

在实际项目中，表格的表头通常不仅包含一行标题，还会有更复杂的表头需求，如下图所示：

标题1	标题2	标题3
内容1	内容2-1	内容2-2	内容3-1	内容3-2


通过rowspan和colspan属性来实现多行列合并，rowspan合并行，colspan合并列，示例代码如下：

th[ rowspan ]{
    vertical-align: middle !important;
    text-align: center !important;
}
th[ colspan ]{
    vertical-align: middle !important;
    text-align: center !important;
}


二、合并单元格
在实际项目中，表格的内容需要合并单元格，如下图所示：


  
    
      标题1
      标题2
      标题3
    
  
  
    
      内容1
      内容2-1
      内容3-1
    
    
      内容2-2
    
  


通过rowspan和colspan属性来实现单元格合并，示例代码如下：

td[ rowspan ]{
    vertical-align: middle !important;
    text-align: center !important;
}
td[ colspan ]{
    vertical-align: middle !important;
    text-align: center !important;
}


三、表格列宽自适应
在实际项目中，表格的列宽不一定相等，需要设置列宽自适应表格宽度，如下图所示：


  
    
      标题1
      标题2
      标题3
    
  
  
    
      内容1
      内容2-1
      内容3-1
    
    
      内容1
      内容2-2
      内容3-2
    
  


通过设置table-layout: fixed;属性，将表格的布局模式设置为固定，示例代码如下：

.layui-table td, .layui-table th{
    padding: 10px 8px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    height: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.layui-table td{
    border-width: 0;
    border-bottom: 1px solid #e2e2e2;
}
.layui-table th{
    color: #666;
    background-color: #f2f2f2;
    font-weight: 400;
    border-width: 0;
    border-bottom: 1px solid #e2e2e2;
}
table {
    border-collapse: collapse;
    table-layout: fixed;
    border-radius: 4px;
    overflow: hidden;
}


四、单元格内文字溢出处理
在实际项目中，表格的单元格内文字可能会过长，需要设置文字溢出显示省略号，如下图所示：

.layui-table td{
    padding: 10px 8px;
    text-align: center;
    font-size: 14px;
    line-height: 22px;
    height: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}


五、分页与搜索
在实际项目中，表格的数据可能会很多，需要设置分页和搜索功能来提高用户体验和数据查询效率，如下图所示：

layui.use('table', function(){
  var table = layui.table;
  
  //执行渲染
  table.render({
    elem: '#demo'
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,loading:true  //开启loading
    ,where: 'where条件'
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:120}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:100}
      ,{field: 'sign', title: '签名', width: 200,templet: function(d){ return d.sign }}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 100}
      ,{field: 'wealth', title: '财富', width: 135, sort: true,templet: function(d){
        return '¥' + d.wealth;
      }}
    ]]
  });
});

使用Layui的table组件，通过page: true属性开启分页，loading:true属性开启loading，通过where属性传递where条件，示例代码如上。

标题1	标题2		标题3
标题1	子标题21	子标题22	子标题31	子标题32
内容1	内容2-1	内容2-2	内容3-1	内容3-2