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

实现效果如图:

相关推荐
像风一样自由202014 分钟前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem1 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊1 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术1 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing1 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止2 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall2 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴2 小时前
简单入门Python装饰器
前端·python
袁煦丞2 小时前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码3 小时前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github