当前位置：首页 > news >正文

Layui的table实现鼠标移入单元格后tips弹框提示

news 2025/6/18 18:52:03

1、问题概述？

在开发中，有时候需要展示的内容非常的多，这个时候就需要通过tips，弹框显示出完整的内容。

解决办法：使用jQuery+layui-table方式实现。

效果如下：

框架的大小，位置，颜色可以更改

2、实现方式

2.1、配置table的相关属性

案例从官网中来

重点：给返回值加上class属性：<div class='tipsfun'>"+data.sign+"</div>

cols: [[ //标题栏{field: 'id', title: 'ID', width: 80, sort: true},{field: 'username', title: '用户', width: 120},{field: 'sign', title: '签名', minWidth: 160,templet:function(data){return "<div class='tipsfun'>"+data.sign+"</div>";}},{field: 'sex', title: '性别', width: 80},{field: 'city', title: '城市', width: 100},{field: 'experience', title: '积分', width: 80, sort: true}]]

2.2、为class="tipsfun"加入鼠标事件

【1、在jquery的ready中初始化即可】

使用jQuery的方式为又class="tipsfun"加入鼠标移入事件和鼠标移出事件

$(function(){var laytips="";//鼠标进入，获取当前内容并弹框显示$(".tipsfun").on("mouseover",function(){var currentText=$(this).text();laytips=layer.tips(currentText,this,{tips:[1, '#000'],//设置tips的类型和颜色time:30000,//tips默认显示时长area:['300px','100px']//设置tip的宽高})});//鼠标移开后关闭tips$(".tipsfun").on("mouseout",function(){layer.close(laytips);});	});

【2、在layui table中的done函数中初始化也可以】

因为：done是在数据渲染完毕的回调函数

time:定义弹框默认显示的时长，毫秒单位

area:设置弹框的显示宽高

tips:显示弹框的类型和颜色

	done:function(res,curr,count){var laytips="";//鼠标进入，获取当前内容并弹框显示$(".tipsfun").on("mouseover",function(){var currentText=$(this).text();laytips=layer.tips(currentText,this,{tips:[1, '#000'],//设置tips的类型和颜色time:30000,//tips默认显示时长area:['300px','100px']//设置tip的宽高})});//鼠标移开后关闭tips$(".tipsfun").on("mouseout",function(){layer.close(laytips);});},

3、完整代码

将代码中的css和js换成你自己的文件。

jquery使用的是1.8或更高版本。

layui使用最新版本就行

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="ID-table-demo-data"></table><!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="layui/layui.js"></script>
<script src="jquery-1.8.0.min.js"></script>
<script>
layui.use('table', function(){var table = layui.table;// 已知数据渲染var inst = table.render({elem: '#ID-table-demo-data',cols: [[ //标题栏{field: 'id', title: 'ID', width: 80, sort: true},{field: 'username', title: '用户', width: 120},{field: 'sign', title: '签名', minWidth: 160,templet:function(data){return "<div class='tipsfun'>"+data.sign+"</div>";}},{field: 'sex', title: '性别', width: 80},{field: 'city', title: '城市', width: 100},{field: 'experience', title: '积分', width: 80, sort: true}]],data: [{ // 赋值已知数据"id": "10001","username": "张三1","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "116"}, {"id": "10002","username": "张三2","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","LAY_CHECKED": true}, {"id": "10003","username": "张三3","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "65"}, {"id": "10004","username": "张三4","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "777"}, {"id": "10005","username": "张三5","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "86"}, {"id": "10006","username": "张三6","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12"}, {"id": "10007","username": "张三7","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "16"}, {"id": "10008","username": "张三8","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "106"}],//skin: 'line', // 表格风格//even: true,page: true, // 是否显示分页limits: [5, 10, 15],limit: 5 // 每页默认显示的数量});
});$(function(){var laytips="";//鼠标进入，获取当前内容并弹框显示$(".tipsfun").on("mouseover",function(){var currentText=$(this).text();laytips=layer.tips(currentText,this,{tips:[1, '#000'],//设置tips的类型和颜色time:30000,//tips默认显示时长area:['300px','100px']//设置tip的宽高})});//鼠标移开后关闭tips$(".tipsfun").on("mouseout",function(){layer.close(laytips);});});</script></body>
</html>

查看全文

http://www.lryc.cn/news/571514.html