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

news2024/11/24 7:33:37

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

实现效果如图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1583322.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

冯喜运:4.10晚间黄金原油走势分析

黄金消息技术面分析&#xff1a;美国CPI年率创半年新高&#xff0c;美国3月未季调CPI年率录得3.5%&#xff0c;高于预期的3.4%水平&#xff0c;为2023年9月以来最高水平。美国CPI高于预期&#xff0c;现货黄金短线下挫16美元。日线当前的指标macd依旧属于金叉放量运行&#xff…

unipush+个推实现消息推送

1.注册个推平台的帐号个推&#xff0c;专业的数据智能服务商-为垂直领域提供数据智能解决方案 2.应用列表中选择新增应用/服务 3.填写下应用信息4.创建好应用后在manifest.json中的sdkConfigs配置上写入appid、appkey、appsecret "sdkConfigs" : {"ad" :…

tailwindcss+vue3+vite+preline项目搭建

最近原子化样式比较火&#xff0c;用了一下确实还不错&#xff0c;也确实是用一些标准的样式能够使网页看起来比较统一&#xff0c;而且能够极大的减轻起名字的压力&#xff0c;有利有弊&#xff0c;就不一一细说了。 之前开发都是习惯于使用vitevue3来开发的&#xff0c;此次搭…

ITK 重采样 resample

Itk 重新采样有二多种情况&#xff0c;这里说二种情况 1. 输入参数 &#xff0c;和输出相关数据&#xff0c;输出范围&#xff0c;spacing &#xff1b; typedef itk::Image< float, 3 > itkFloatImageType;typedef itk::ResampleImageFilter < itkFloatImageType, i…

观察者模式与发布-订阅模式的对决

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

基础算法(算法竞赛、蓝桥杯)--堆排序

1、B站视频链接&#xff1a;A15 堆 堆排序_哔哩哔哩_bilibili 题目链接&#xff1a;【模板】堆 - 洛谷 #include <iostream> using namespace std; int a[1000010],cnt; void up(int u){ //上浮if(u/2 && a[u/2]>a[u]) swap(a[u],a[u/2]), up(u/2); } void d…

练习题(2024/4/10)

1. 删除有序数组中的重复项 给你一个 非严格递增排列 的数组 nums &#xff0c;请你 原地 删除重复出现的元素&#xff0c;使每个元素 只出现一次 &#xff0c;返回删除后数组的新长度。元素的 相对顺序 应该保持 一致 。然后返回 nums 中唯一元素的个数。 考虑 nums 的唯一元…

Vue3---基础1(认识,创建)

变化 相对于Vue2&#xff0c;Vue3的变化&#xff1a; 性能的提升 打包大小减少 41% 初次渲染快 55%&#xff0c;更新渲染快133% 内存减少54% 源码的升级 使用 proxy 代替 defineProperty 实现响应式 重写虚拟 DOM 的实现和 Tree-shaking TypeScript Vue3就可以更好的支持TypeSc…

Harmony鸿蒙南向驱动开发-MMC

MMC&#xff08;MultiMedia Card&#xff09;即多媒体卡&#xff0c;是一种用于固态非易失性存储的小体积大容量的快闪存储卡。 MMC后续泛指一个接口协定&#xff08;一种卡式&#xff09;&#xff0c;能符合这种接口的内存器都可称作MMC储存体。主要包括几个部分&#xff1a;…

【java工具-灵活拉取数据库表结构和数据】

需求&#xff1a; 假设我们现在有一个需求&#xff0c;需要快速拉取数据库的某些表建表语句&#xff0c;和数据&#xff0c;平时做备份之类&#xff1b; 我这边自己写了个工具&#xff0c;不多废话&#xff0c;也不整虚的&#xff0c; 直接看代码&#xff1a; package com.…

SQL注入sqli_labs靶场第五、六题

第五题 根据报错信息&#xff0c;判断为单引号注入 没有发现回显点 方法&#xff1a;布尔盲注&#xff08;太耗时&#xff0c;不推荐使用&#xff09; 1&#xff09;猜解数据库名字&#xff1a;&#xff08;所有ASCII码值范围&#xff1a;0~127&#xff09; ?id1 and length…

Redis从入门到精通(四)Redis实战(一)短信登录

文章目录 前言第4章 Redis实战4.1 短信登录4.1.1 基于session实现短信登录4.1.1.1 短信登录逻辑梳理4.1.1.2 创建测试项目4.1.1.3 实现发送短信验证码功能4.1.1.4 实现用户登录功能4.1.1.5 实现登录拦截功能4.1.1.6 session共享问题 4.1.2 基于Redis实现短信登录4.1.2.1 Key-Va…

Web3 游戏周报(3.31-4.6)

【3.31-4.6】Web3 游戏行业动态&#xff1a; Xai 基金会宣布与 Reboot 达成合作拟支持 Pixel Vault: BattiePlan 游戏生态迁移 加密游戏 Hytopia 在节点销售获得 800 万美元后将于本月推出测试版 新加坡 Web3 游戏初创公司 Gomble Games 完成 1,000 万融资 NFT 卡牌游戏 Par…

PyCharm+PyQt5配置方法

一、前言 PyQt5PyQt5是一套Python绑定Digia QT5应用的框架。Qt库是最强大的GUI库之一PyQt5-toolsPyQt5中没有提供常用的Qt工具&#xff0c;比如图形界面开发工具Qt Designer&#xff0c;PyQt5-tools中包含了一系列常用工具Qt Designer可以通过Qt Designer来编写UI界面&#xf…

SPI外设简介

SPI外设简介 简介部分 可配置8/16位数据帧、高位先行/低位先行 SPI和I2C都是高位先行&#xff0c;串口是低位先行 PCLK是外设时钟&#xff0c;APB2是72MHz、APB1是36MHz SPI1的时钟频率比SPI2的大一倍 如果需要快速大量传输数据&#xff0c;可以使用DMA数据转运&#xff0…

Chrome谷歌下载入口

​hello&#xff0c;我是小索奇 发现好多人说谷歌浏览器在哪里下载呀&#xff0c;哪里可以找到&#xff1f; 你可能会心想&#xff0c;一个浏览器你还不会下载啊&#xff1f; 还真是&#xff0c;有很多伙伴找不到下载入口&#xff0c;为什么呢&#xff1f; Bing进行搜索&am…

2、java语法之循环、数组与方法(找工作版)

写在前面&#xff1a;整个系列文章是自己学习慕课相关视频&#xff0c;进行的一个总结。文章只是为了记录学习课程的整个过程&#xff0c;方便以后查漏补缺&#xff0c;找到对应章节。 文章目录 一、Java循环结构1、while循环2、do-while循环3、for循环4、嵌套循环5、break语句…

【技术揭秘】爬取网站或APP应用的几种常用方案:RPA、抓包工具、Python爬虫,你了解多少?

本来准备空闲之余尝试用RPA软件抓取数据&#xff0c;【AIRPA系列】1、利用AIRPA提升工作效率 应用场景 &#xff0c; 最近工作项目有点忙&#xff0c; RPA实操系列可能会晚点了&#xff08;自己真正实操后再写&#xff0c;copy别人的没啥意思&#xff09;。这里简单整理下爬取…

Docker快速上手及常用命令速查

Docker快速上手 安装 在ubuntu上安装docker: sudo apt-get install docker docker -v #查看版本在centos7上安装docker&#xff1a;(docker在YUM源的Extras仓库中) yum install docker systemctl start dockerdocker常用命令速查 #查看docker信息 docker info #查看本地镜…

【面试题】redis在工作中的使用场景有哪些?

前言&#xff1a;在实际工作中&#xff0c;Redis作为一种高性能的内存数据库和缓存系统&#xff0c;可以应用于多种场景&#xff0c;同时在面试过程中也经常被问到类似的问题&#xff0c;我们经常会被问的一脸懵逼&#xff0c;那今天我们就来总结一下redis的一些使用场景。 数据…