Layui复杂表头用法介绍
发布时间:2023-11-23 00:28:24
发布人:xqq
本文将介绍如何使用Layui实现复杂表头，包含多行多列表头和合并单元格等功能。
一、多行多列表头
在实际项目中，表格的表头通常不仅包含一行标题，还会有更复杂的表头需求，如下图所示：
标题1
标题2
标题3
子标题21
子标题22
子标题31
子标题32
内容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条件，示例代码如上。
