Layui 表格Row/Cell鼠标Hover)

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 += `
${
       tipArr[i]}
` 
         }
         //提示（设置字体颜色）
         let rowId="#CompareQuantityTip_"+id;
         showTips=layer.tips(""+tipStringHtml+"",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 += `
${
       tipArr[i]}
` 
            }
            //提示（设置字体颜色）
            layer.tips(""+tipStringHtml+"",obj,{
     
                area: 'auto',//显示的内容的大小
                tips:[2,'#FFFFCC'],//显示方向以及背景颜色
                time:4000//4秒后销毁
            });
        }
    }
</script>