layui table表头字段增加字段说明提示效果
项目背景：
在实际项目开发中，使用layui table显示列表页数据的时候，有些数据列的标题属于专业名词，需要提供说明提示文字，这样才能方便一般使用者明白字段的含义。
实战代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui table表头字段增加字段说明提示效果</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {
padding: 20px;
}
.tips-bg {
background-image: url('./icon-tips.svg?v=0.0.1');
background-repeat: no-repeat;
background-position: right 3px top 3px;
}
</style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container"></div>
</script>
<script type="text/html" id="barDemo"></script>
<table id="demo" lay-filter="demo"></table>
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script>
<script>
layui.use(['table'], function () {
var table = layui.table, $ = layui.$;
// 字段说明内容对象
var tipsObj = {
"pv": "PV（page view，页面浏览量），一般指页面浏览量。网页浏览数是评价网站流量最常用的指标之一，简称为PV。",
"uv": "UV一般指独立访客。 独立访客就是独立IP访客（Unique Visitor）",
"gmv": "GMV（全称Gross Merchandise Volume），即商品交易总额，是成交总额（一定时间段内）的意思。多用于电商行业，一般包含拍下未支付订单金额。"
};
// 服务端返回的原始数据
var statListData = {
"status": 0,
"message": "ok",
"total": 5,
"data": {
"list": [
{
"id": 1,
"date": "2022-07-11",
"pv": 20,
"uv": 15,
"gmv": "3045.67",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 2,
"date": "2022-07-12",
"pv": 38,
"uv": 26,
"gmv": "2986.45",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 3,
"date": "2022-07-13",
"pv": 29,
"uv": 19,
"gmv": "2981.23",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 4,
"date": "2022-07-14",
"pv": 35,
"uv": 27,
"gmv": "3125.44",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 5,
"date": "2022-07-15",
"pv": 37,
"uv": 26,
"gmv": "2789.68",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
}
]
}
};
// 由于是演示程序, 这里直接取出商品数据用于表格渲染
var listData = statListData.data.list;
// 表格渲染
table.render({
elem: '#demo',
// url: 'http://localhost/getStatList', // 这里是服务端接口的地址
data: listData, // 直接赋值静态数据。真实数据需要通过请求服务端接口获取, 由于是演示程序, 这里直接使用data字段设置静态数据
limit: 20,
toolbar: '#toolbarDemo',
cols: [[
{ field: 'id', title: 'ID', fixed: "left", sort: true }, // ID列固定左侧
{ field: 'date', title: '日期', sort: true },
{ field: 'pv', title: 'PV', sort: true },
{ field: 'uv', title: 'UV', sort: true },
{ field: 'gmv', title: 'GMV', sort: true },
{ field: 'createTime', title: '创建时间', sort: true },
{ field: 'updateTime', title: '最近一次更新时间', sort: true }
]],
parseData: function (res) {
return {
"status": res.status,
"msg": res.message,
"count": res.total,
"data": res.data.list
};
},
done: function () {
},
error: function (res, msg) {
console.log(res, msg)
}
});
// 给表头设置字段说明提示效果
$('.layui-table-header').children('table').children('thead').children('tr').children('th').each(function(){
var fieldName = $(this).data('field');
var content = tipsObj[fieldName];
// 设置class
if (content != undefined && content) {
$(this).addClass('tips-bg');
}
// 设置事件
$(this).on('mouseenter', function () {
if (content != undefined && content) {
this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">' + content + '</div>', this, {
time: -1,
maxWidth: 300,
tips: [1, '#3A3D49']
});
}
}).on('mouseleave', function () {
layer.close(this.index);
});
});
// toolbar事件监听
table.on('toolbar(demo)', function (obj) {
if (obj.event === 'LAYTABLE_COLS') { // 监听筛选列操作
// 给筛选列中的列设置提示效果
$('.layui-form-checkbox').on('mouseenter', function () {
let fieldName = $(this).parent('li').find('input').attr('name');
let content = tipsObj[fieldName];
if (content != undefined && content) {
this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">' + content + '</div>', this, {
time: -1,
maxWidth: 300,
tips: [2, '#3A3D49']
});
}
}).on('mouseleave', function () {
layer.close(this.index);
});
}
});
});
</script>
</body>
</html>效果图：
