layui中对table表格内容鼠标移入显示 tips内容

时间:2024-04-14 20:41:14

要在Layui中的表格中实现鼠标移入显示Tips,你可以使用Layui的事件监听和Tips组件。

有两种实现方式!

第一种是,通过自定义鼠标事件显示 tips。在渲染 table 时,对 filed 进行重构,增加相应的选择器标识,一般为 class 选择器,然后针对选择器内容添加鼠标移入、移除监听,进行弹 tips 内容。

缺点是,需要对每个需要 弹tips的字段进行设置。

加载 渲染table代码如下:

tableIns = table.render({
          elem: '#questionTable'
                , url: '/scDictonary/selectDictionaryByNo?dictNo=' + dictNo
                , toolbar: '#toolbar'
                , defaultToolbar: ['']
                , height: 'full-80'
                , cols: [[ //表头
                    {field: 'dictNo', title: '编号'}
                    , {field: 'facility', title: '功能', templet: function (d) {
                            var str = '<div dictId="' + d.dictId + '" class="func_name"><span>' + (d.funcName || '') + '<span></div>';
                            return str;
                        }
                    }
                    , {title: '操作', align: 'center', toolbar: '#barDemo'}
                ]]
            });

关键代码如下:

var layerTipIndex = null;

    $(document).on('mouseover', '.func_name', function () {
        var text = $(this).text();
        var dictId = $(this).attr('dictid');
        $(this).parent().attr('id', dictId);
        layerTipIndex = layer.tips(text, '#' + dictId, {
            tips: [1, '#78BA32'],
            time: 0
        });
    });

    $(document).on('mouseout', '.func_name', function () {
        layer.close(layerTipIndex);
    });

第二种是仅在超长时,鼠标移入显示 tips 标签内容。

        实现方法:直接利用 layuiTable 中的组件功能,在渲染时,直接添加overflow: 'tips'这个设置。添加后表格中所有的超长内容,在鼠标移入后都可进行 tips 弹窗显示。代码示例图片如下:

实现效果如图: