Layui 表格Row/Cell鼠标Hover)

最新推荐文章于 2024-04-25 00:18:03 发布

七海桑城

最新推荐文章于 2024-04-25 00:18:03 发布

阅读量1.7k

点赞数

分类专栏： Layui

本文链接：https://blog.csdn.net/qq_33556442/article/details/111749699

版权

Layui 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Layui 表格Row/Cell鼠标Hover)

效果图

在这里插入图片描述

Row鼠标Hover

js文件代码片

cols: [[ 
	{
		field: 'cquantity', 
		title: '对比数量',
		templet:'#CompareQuantity',//模板id的DOM
	}
]],
done:function(result){
    funCompareQuantityTips();//整行鼠标悬停事件
 },

html页面代码片

<script type="text/html" id="CompareQuantity">
        <span id="CompareQuantityTip_{{d.id}}">{{d.cquantity}}</span>
</script>

js文件代码片

function funCompareQuantityTips(){
    var showTips = null; // tips提示
     $('tr').hover(function(){
         var previewTimes = $(this).find('td[data-field="previewTimes"] div').text();
         var id = $(this).find('td[data-field="id"] div').text();
         let tipArr = previewTimes.split(",");//拆分日期
         tipArr=tipArr.sort(function(a,b){return Date.parse(b) - Date.parse(a);});//日期排序
         let tipStringHtml = "";//拼接显示内容
         for(var i=0;i<tipArr.length;i++){
             tipStringHtml += `<p>${tipArr[i]}</p>` 
         }
         //提示（设置字体颜色）
         let rowId="#CompareQuantityTip_"+id;
         showTips=layer.tips("<span style='color:black'>"+tipStringHtml+"</span>",rowId,{
             area: 'auto',
             tips:[2,'#FFFFCC'],//显示方向以及背景颜色(1.上 2右 3下 4左)
             time:4000//4秒后销毁
         });
     },function(){
         layer.close(showTips);
     });
 }

Cell鼠标Hover

js文件代码片

cols: [[ 
	{
		field: 'cquantity', 
		title: '对比数量',
		templet:'#CompareQuantity',//模板id的DOM
	}
]]

html页面代码片

<script type="text/html" id="CompareQuantity">
        <a href="javascript:;" data-d="{{d.previewTimes}}" onmouseover="showCompareQuantity(this)">{{d.cquantity}}</a>
</script>

html页面代码片

<script type="text/javascript">
   //对比数量鼠标经过事件
    function showCompareQuantity(obj){
        var row=$(obj).attr('data-d'); //获取显示内容
        if(row){
            let tipArr = row.split(",");//拆分日期
            tipArr=tipArr.sort(function(a,b){return Date.parse(b) - Date.parse(a);});//日期排序
            let tipStringHtml = "";//拼接显示内容
            for(var i=0;i<tipArr.length;i++){
                tipStringHtml += `<p>${tipArr[i]}</p>` 
            }
            //提示（设置字体颜色）
            layer.tips("<span style='color:black'>"+tipStringHtml+"</span>",obj,{
                area: 'auto',//显示的内容的大小
                tips:[2,'#FFFFCC'],//显示方向以及背景颜色
                time:4000//4秒后销毁
            });
        }
    }
</script>