精华内容
下载资源
问答
  • easyui datagrid columns 鼠标悬停显示内容

    如果columns 内容过多无法显示全部,可以通过formatter 方法 返回带有titile属性的元素,这样就可以简单快速的显示其中的内容!

    注:如果内容过多页面会卡死

    $('#dg').datagrid({
                fitColumns: true,
                nowrap: true,
                striped: true,
                rownumbers: true,
                pagination: true,
                singleSelect: true,
                columns: 
                [[
                    {
                        field: "itemid", 
                        width: 80, 
                        formatter: function (value) {
                        return "<span title='" + value + "'>" + value + "</span>";
                        }
                    }
                ]]
    });
    展开全文
  • 首先看一下效果,如下图所示: 代码部分: 1.在option对象下的tooltip对象中添加formatter函数,代码如下: var option = { ... formatter:formatterHover,//修改鼠标悬停显示内容 }, } 2.编写formatte

    首先看一下效果,如下图所示:

    效果图

    代码部分:

    1.在option对象下的tooltip对象中添加formatter函数,代码如下:

    var option = {
        tooltip: {
    	 trigger: 'item',
    	 triggerOn: 'mousemove',
             enterable:true,//鼠标是否可进入提示框浮层中
              formatter:formatterHover,//修改鼠标悬停显示的内容
        },
    }

    2.编写formatter函数,根据自己的需求编写,代码如下:

    /**
    * 鼠标悬停时显示详情
     */
    function formatterHover(params){
         // console.log(params);
         var deviceType = params.data.type;
         var imgPath = params.data.symbol;
         //图片地址截取,因为echarts修改图片的时候有一个------image://---前缀,前缀后面的才是图片真正的地址
        var imgPathSrc = imgPath.split("image://")[1];
        // console.log('str',imgPathSrc);
        if (deviceType === 'Internet' || deviceType === 'hub'){
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="position: relative;top: -10px;padding:0 5px;">'+ params.data.name+'</span>';
        }  if (deviceType === 'switch'){
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="position: relative;top: -10px;padding: 0 5px;">设备类型:'+ params.data.name+'</span>'+ '<br>'
             + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">IP:'+ params.data.IP+'</span>'+ '<br>'
             + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">MAC:'+ params.data.MAC+'</span>'+ '<br>'
             + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">设备型号:'+ params.data.deviceNum+'</span>';
        }else{
            return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="position: relative;top: -10px;padding: 0 5px;">设备类型:'+ params.data.name+'</span>'+ '<br>'
            + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">IP:'+ params.data.IP+'</span>'+ '<br>'
            + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">MAC:'+ params.data.MAC+'</span>'+ '<br>'
            + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">账号:'+ params.data.account+'</span>'+ '<br>'
            + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">所在位置:'+ params.data.location+'</span>'+ '<br>'
            + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">最后登录时间:'+ params.data.lastLoginTime+'</span>';
            }
    }

    3.完整代码如下:

    注:

    1.代码中的图片是本地image文件夹下的图片,直接运行图片应该会报错,放到idea或Visual Studio Code下运行不会报错

    2.image下的图片要换成自己文件夹下的图片,如果不想换,可参考我另一篇文章,用服务器图片:

    https://blog.csdn.net/qq_36509946/article/details/108219598

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
    	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
        <script type="text/javascript" src="js/echars.js"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="main" style="width: 1000px;height:500px;"></div>
        <div class="right-click-menu" style="display: none;padding: 5px;border: 1px solid #CCCCCC;width: 200px;">右键操作菜单</div>
        <script type="text/javascript">
            // 基于准备好的dom,初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    		var data = {
    		  "name": "外部网络",
              "type":"Internet",
              "symbol": 'image://image/internet.png',
    		  "children": [
    		    {
                      "name": "交换机",
                      "type":"switch",
                      "IP":"192.168.30.126",
                      "MAC":"b0:98:6e:bf:6r:4c",
                      "deviceType":"交换机",
                      "deviceNum":"HUAWEI",
                      "symbol": 'image://image/switch.png',
    		      "children": [
    		        {
    		            "name": "笔记本",
                        "type":"network",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"笔记本",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/network.png',
    		        },
    		        {
    		            "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"计算机",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/computer.png',
    		          "children": [
    			        {
    			            "name": "计算机1",
                            "type":"computer",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"计算机1",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/computer.png',
    			        },
    			        {
    			            "name": "计算机2",
                            "type":"computer",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"计算机2",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/computer.png',
    			        },
    			        {
    			            "name": "计算机3",
                            "type":"computer",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"计算机3",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/computer.png',
    			        },
    			        {
    			            "name": "计算机4",
                            "type":"computer",
                            "IP":"192.168.30.126",
                            "MAC":"b0:98:6e:bf:6r:4c",
                            "deviceType":"计算机4",
                            "account":"xiaox",
                            "location":"204",
                            "lastLoginTime":"2020-8-26",
                            "symbol": 'image://image/computer.png',
    			        }
    			      ]
    		        },
    		        {
    		            "name": "路由器",
                        "type":"rooter",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"路由器",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/rooter.png',
    		        },
    		        {
    		            "name": "服务器",
                        "type":"service",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"服务器",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/service.png',
    		        },
    		        {
    		            "name": "打印机",
                        "type":"print",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"打印机",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/print.png',
    		        },
    		        {
    		            "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"计算机",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/computer.png',
    		        }
    		      ]
    		    },
    		    {
    		      "name": "无线交换机",
                  "type":"switch",
                  "IP":"192.168.30.126",
                  "MAC":"b0:98:6e:bf:6r:4c",
                  "deviceType":"交换机",
                  "deviceNum":"HUAWEI",
                  "symbol": 'image://image/switch.png',
    		      "children": [
    		        {
    		            "name": "手机",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"手机",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/phone.png',
    		        },
    		        {
    		            "name": "平板",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"平板",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/phone.png',
    		        }
    		      ]
    		    },
    		    {
    		      "name": "hub",
                  "type":"hub",
                  "symbol": 'image://image/hub.png',
    		      "children": [
    		        {
    		            "name": "计算机",
                        "type":"computer",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"计算机",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/computer.png',
    		        },
    		        {
    		            "name": "笔记本",
                        "type":"phone",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"手机",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/phone.png',
    		        },
    		        {
    		            "name": "打印机",
                        "type":"print",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"打印机",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/print.png',
    		        },
    		        {
    		            "name": "路由器",
                        "type":"rooter",
                        "IP":"192.168.30.126",
                        "MAC":"b0:98:6e:bf:6r:4c",
                        "deviceType":"路由器",
                        "account":"xiaox",
                        "location":"204",
                        "lastLoginTime":"2020-8-26",
                        "symbol": 'image://image/rooter.png',
    		        }
    		      ]
    		    }
    		  ]
    		};
    //		页面初始化的时候,隐藏奇数位的子节点
    //		echarts.util.each(data.children, function (datum, index) {
    //	        index % 2 === 0 && (datum.collapsed = true);
    //	    });
    
    		var option = {
    			tooltip: {
    	            trigger: 'item',
    	            triggerOn: 'mousemove',
                    enterable:true,//鼠标是否可进入提示框浮层中
                    formatter:formatterHover,//修改鼠标悬停显示的内容
    	       },
    	        series: [
    	            {
    	                type: 'tree',
    	                data: [data],
    	                top: '1%',
    	                left: '7%',
    	                bottom: '1%',
    	                right: '20%',
    	                label: {
    	                    position: 'left',
    	                    verticalAlign: 'middle',
    	                    align: 'right',
    	                    fontSize: 9
    	                },
    	                leaves: {
    	                    label: {
    	                        position: 'right',
    	                        verticalAlign: 'middle',
    	                        align: 'left'
    	                    }
    	                },
                            symbolSize: [30, 30],
    	                edgeForkPosition: "72%",
    	                roam:true,//鼠标缩放,拖拽整颗树
    	                expandAndCollapse: true,//无关的子树折叠收起
    	                animationDuration: 550,
    	                animationDurationUpdate: 750,
    	                width: "50%"//组件宽度
    	            }
    	        ]
    		}
            /**
             * 鼠标悬停时显示详情
             */
    		function formatterHover(params){
    		    // console.log(params);
    		    var deviceType = params.data.type;
    		    var imgPath = params.data.symbol;
    		    //图片地址截取,因为echarts修改图片的时候有一个------image://---前缀,前缀后面的才是图片真正的地址
                var imgPathSrc = imgPath.split("image://")[1];
                // console.log('str',imgPathSrc);
    		    if (deviceType === 'Internet' || deviceType === 'hub'){
    		        return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="position: relative;top: -10px;padding:0 5px;">'+ params.data.name+'</span>';
                    // return firstParams.name + '  ' + firstParams.seriesName + '<br>' + '装机:' + firstParams.data + ' 亿千瓦<br>增长率:' + sndParams.data +' %';
                }  if (deviceType === 'switch'){
                    return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="position: relative;top: -10px;padding: 0 5px;">设备类型:'+ params.data.name+'</span>'+ '<br>'
                        + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">IP:'+ params.data.IP+'</span>'+ '<br>'
                        + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">MAC:'+ params.data.MAC+'</span>'+ '<br>'
                        + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">设备型号:'+ params.data.deviceNum+'</span>';
                }else{
                    return "<img src='"+imgPathSrc+" ' width='30px' height='30px'>" + '<span style="position: relative;top: -10px;padding: 0 5px;">设备类型:'+ params.data.name+'</span>'+ '<br>'
                        + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">IP:'+ params.data.IP+'</span>'+ '<br>'
                        + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">MAC:'+ params.data.MAC+'</span>'+ '<br>'
                        + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">账号:'+ params.data.account+'</span>'+ '<br>'
                        + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">所在位置:'+ params.data.location+'</span>'+ '<br>'
                        + '<span style="padding-left:5px;height:30px;line-height:30px;display: inline-block;">最后登录时间:'+ params.data.lastLoginTime+'</span>';
                }
    
            }
    		/**
    		 * 解决echarts图片首次加载不显示的问题
    		 */
    		setTimeout(function(){
    		     $(myChart).resize();     
    		},200)
    		/**
    		 * 解决点击父节点合并或展开后子节点图片不显示的问题
    		 */
    		$(window).on('click',function(){
    			$(myChart).resize();
    		})
    	    myChart.setOption(option);
        </script>
    </body>
    </html>

     

    展开全文
  • antd 的table td 超出部分隐藏并显示省略号 ,鼠标悬停显示内容 columns = [ { title: '描述', dataIndex: 'desc',key:"desc", onCell: () => { return { style: { maxWidth: 150, overflow: 'hidden', ...

    项目中遇到的

    antd 的table td 超出部分隐藏并显示省略号 ,鼠标悬停显示内容

    columns = [
         { title: '描述', dataIndex: 'desc',key:"desc",
          onCell: () => {
            return {
              style: {
                maxWidth: 150,
                overflow: 'hidden',
                whiteSpace: 'nowrap',
                textOverflow:'ellipsis',
                cursor:'pointer'
              }
            }
          },
          render: (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
        },
    
    展开全文
  • easyUI 鼠标悬停显示内容

    千次阅读 2018-01-11 09:07:48
    当用户移动鼠标指针在某个元素上时,出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。 1、从标记创建提示框(Tooltip),添加 'easyui-tooltip' class 到元素,...

    当用户移动鼠标指针在某个元素上时,出现提示信息窗口用来显示额外信息。提示内容可以包含任何来自页面的或者通过 ajax 生成的 html 元素。

    1、从标记创建提示框(Tooltip),添加 'easyui-tooltip' class 到元素,不需要任何的 javascript 代码。

    
    <a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
    
    
    2、使用 javascript 创建提示框(Tooltip)。
        $('#dd').tooltip({
            position: 'right',
            content: '<span style="color:#fff">This is the tooltip message.</span>',
            onShow: function(){
        		$(this).tooltip('tip').css({
        			backgroundColor: '#666',
        			borderColor: '#666'
        		});
            }
        });

    属性


    名称 类型 描述 默认值
    position string 提示框(tooltip)位置。可能的值:'left'、'right'、'top'、'bottom'。 bottom
    content string 提示框(tooltip)内容。 null
    trackMouse boolean 如果设置为 true,提示框(tooltip)会随着鼠标移动。 false
    deltaX number 提示框(tooltip)位置的水平距离。 0
    deltaY number 提示框(tooltip)位置的垂直距离。 0
    showEvent string 引发提示框(tooltip)出现的事件。 mouseenter
    hideEvent string 引发提示框(tooltip)消失的事件。 mouseleave
    showDelay number 显示提示框(tooltip)的时间延迟。 200
    hideDelay number 隐藏提示框(tooltip)的时间延迟。 100


    展开全文
  • //表格超出宽度鼠标悬停显示td内容 function paramsMatter(value,row,index) { var span=document.createElement("span"); span.setAttribute("title",value); span.innerHTML = value; ...
  • html a标签 鼠标悬停显示内容

    千次阅读 2020-01-05 15:07:07
    <a href="" title="你要显示内容!">标题</a>
  • zedGraph 鼠标悬停 显示内容

    千次阅读 2012-05-05 16:38:05
    zedGraphControl1.PointValueEvent+=new ZedGraphControl.PointValueHandler(MyPointValueHandler);... //鼠标悬停节点事件  private string MyPointValueHandler(ZedGraphControl sender, GraphPane pane, Cur
  • el-table 列鼠标悬停显示内容

    千次阅读 2020-03-25 14:39:50
    效果 代码
  • selectname="occupation"id='occupation'style="width:160px;"onMouseOver="viewTitle(this)">   function viewTitle(obj) { for(var i=0;...obj.options[i].title=obj.options[i].text;...obj.title=obj
  • 尚未为所有Insiders启用固定网站的实时预览,因此当你将鼠标悬停在任务栏中的缩略图上时,可能会看到一个灰色窗口。正在继续完善这一体验。 微软正在努力为现有的固定网站启用新的任务栏体验。同时,你可以从任务栏...
  • 本文给大家分享css3代码实现鼠标悬停显示要扩展的内容,在空间过于拥挤时需要隐藏部分内容使用此功能比较好,下面小编给带来了具体实现代码,一起看看吧
  • C# DevExpress 实现鼠标悬停显示下拉内容以及鼠标移除控件时内容隐藏
  • 鼠标悬停显示td全部内容

    千次阅读 2019-02-25 17:41:29
    一般当table的某字段内容溢出,会以省略号代替...//描述鼠标悬停显示全部内容 $(function () { $("td").on("mouseenter",function() { if (this.offsetWidth &lt; this.scrollWidth) { ...
  • EasyUI Datagrid 鼠标悬停显示单元格内容 第一种方式: 1.js 定义函数 "text/javascript"> //格式化单元格提示信息 function formatCellTooltip(value){ return "" + value + "'>" + value + "...
  • 前言:有时候就是会碰到这种要求,非要在列表上就显示那种字段值很多的列,放到详情...2、table中的td超出内容隐藏,鼠标悬停显示内容 adasf 3、css实现div(块级元素)内显示两行或者三行,超出部分用省略号显示 ...
  • 1. 表格内容超出单元格时以省略号显示,鼠标悬停显示完整内容 https://blog.csdn.net/huangxinglian/article/details/87875049
  • 功能描述:table鼠标悬停显示单元格内容 1.js函数 1 function hoveringShow(value) { 2 return "<span title='" + value + "'>" + value + "</span>"; 3 } 2.调用函数 1 <table id=...
  • 最近得出一个css规律,凡是变化的css特效,总是在不同状态之间转换,只要规定好不同状态下的样式并使用 transition 1 <!DOCTYPE html> 2 <...鼠标悬停显示透明文字内容</title...
  • 最近碰到一个问题,鼠标悬停到A标签时显示一个div,查了一下才知道是title属性里面的内容 直接上代码 //个性title提示样式 $(function () { $("a").each(function (b) {//这里是控制标签 if (this.title)...
  • jQuery鼠标悬停居中放大显示内容代码,当鼠标经过模块时该模块放大突出叠加展示内容详情效果。
  • EasyUI Datagrid 鼠标悬停显示单元格内容 第一种方式: 1.js 定义函数 &lt;script type="text/javascript"&gt; //格式化单元格提示信息 function for...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 632
精华内容 252
关键字:

鼠标悬停显示内容