Layui 表格Row/Cell鼠标Hover)

Layui 表格Row/Cell鼠标Hover)

效果图

Layui 表格Row/Cell鼠标Hover)_第1张图片

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>

你可能感兴趣的:(Layui)