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

张大大大大旭2024-04-10 13:28

要在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 弹窗显示。代码示例图片如下：

实现效果如图：