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

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

实现效果如图:

相关推荐
脑袋大大的14 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0123 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
xiaoyan20151 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
彤银浦2 小时前
Web学习笔记3
前端·笔记·学习·html5
江城开朗的豌豆2 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆3 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆3 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding3 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui