Layui Table 鼠标悬浮弹层显示超出内容、Table基本操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了Layui Table 鼠标悬浮弹层显示超出内容、Table基本操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JS的DOM之鼠标悬浮事件

鼠标悬浮事件之 mouseover()和 mouseout()事件
鼠标在这块区域时候会触发相应事件，将鼠标挪开则恢复原先事件

function tableInit(excels){
        table.render({
            elem: '#partList'
            ,height: '400'
            ,cols: [[
                //设置行自增编号
                {type: 'numbers', fixed: 'left'},
                {field: 'path', title: s_path, align: 'center',templet:function (d){
                        var imgSrc = setter.atlasHost + d.path
                        return '<div class="viewItem"><img src="'+imgSrc+'" height="28px"></div>'
                    }},
                //设置列可编辑
                {field: 'number', title: '<span class="layui-icon layui-icon-edit" style="color: #5fb878;font-size: 12px;">'+s_order_number+'</span>', edit: 'text',align: 'center'},
                //鼠标悬浮显示列全部内容
                {field: 'vehicleRemarks', title: '<span tips-ld="vehicleRemarks" class="layui-icon layui-icon-edit" style="color: #5fb878;font-size: 12px;">'+s_vehicleRemarks+'</span>', align: 'left',templet:function(d){
                        //TODO 需要弹层的列绑定class【remarksDom】
                        return '<label class="remarksDom">'+d.vehicleRemarks +'</label>'
                    }},
                //绑定操作列
                {title: s_action, align: 'center', toolbar: '#actionBar', fixed: 'right'}
            ]]
            ,data:excels
            ,limit:Number.MAX_VALUE
        });
    }

悬浮事件编写

var tipsVal;
    // 1.找到触发的事件对象（绑定全局）  2.事件处理程序
    $('body').on('mouseover','.remarksDom', function () {
        var ovText = $(this).text();
        //内容超出长度显示弹层，否则无需弹层
        if(ovText.length < 16){
            return;
        }
        var html = "<p style='word-wrap:break-word;width: 150px;'>" + ovText + "</p>";
        tipsVal=layer.tips(html,this,{tips:[1,"rgb(58, 61, 73)"]});
    });
    //鼠标移出
    $('body').on('mouseout','.remarksDom', function () {
        layer.close(tipsVal);
    });