-
easyui datagrid columns 鼠标悬停显示内容
2018-01-22 17:55:03easyui 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>"; } } ]] });
-
echarts修改鼠标悬停在节点上时显示的内容,自定义鼠标悬停显示内容
2020-08-26 15:05:54首先看一下效果,如下图所示: 代码部分: 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 超出部分隐藏并显示省略号 ,鼠标悬停显示内容
2020-10-07 09:41:43antd 的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 代码。
2、使用 javascript 创建提示框(Tooltip)。<a href="#" title="This is the tooltip message." class="easyui-tooltip">Hover me</a>
$('#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
-
页面表格内容太长,则使用鼠标悬停显示内容
2020-03-31 16:31:13//表格超出宽度鼠标悬停显示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:05zedGraphControl1.PointValueEvent+=new ZedGraphControl.PointValueHandler(MyPointValueHandler);... //鼠标悬停节点事件 private string MyPointValueHandler(ZedGraphControl sender, GraphPane pane, Cur -
el-table 列鼠标悬停显示内容
2020-03-25 14:39:50效果 代码 -
下拉框鼠标悬停显示内容
2012-07-20 10:53:12selectname="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 -
qtablewidget鼠标悬停显示内容_微软 Win10 Dev 预览版 Build 20251 发布(附更新内容)...
2020-12-06 03:24:04尚未为所有Insiders启用固定网站的实时预览,因此当你将鼠标悬停在任务栏中的缩略图上时,可能会看到一个灰色窗口。正在继续完善这一体验。 微软正在努力为现有的固定网站启用新的任务栏体验。同时,你可以从任务栏... -
CSS3实现鼠标悬停显示扩展内容
2020-09-24 21:01:21本文给大家分享css3代码实现鼠标悬停显示要扩展的内容,在空间过于拥挤时需要隐藏部分内容使用此功能比较好,下面小编给带来了具体实现代码,一起看看吧 -
C# DevExpress 实现鼠标悬停显示下拉内容以及鼠标移除控件时内容隐藏
2020-08-14 10:56:11C# DevExpress 实现鼠标悬停显示下拉内容以及鼠标移除控件时内容隐藏 -
鼠标悬停显示td全部内容
2019-02-25 17:41:29一般当table的某字段内容溢出,会以省略号代替...//描述鼠标悬停显示全部内容 $(function () { $("td").on("mouseenter",function() { if (this.offsetWidth < this.scrollWidth) { ... -
EasyUI Datagrid 鼠标悬停显示单元格内容
2017-02-13 23:53:14EasyUI Datagrid 鼠标悬停显示单元格内容 第一种方式: 1.js 定义函数 "text/javascript"> //格式化单元格提示信息 function formatCellTooltip(value){ return "" + value + "'>" + value + "... -
table标签里td内容的超出/隐藏/鼠标悬停显示
2020-03-18 13:50:22前言:有时候就是会碰到这种要求,非要在列表上就显示那种字段值很多的列,放到详情...2、table中的td超出内容隐藏,鼠标悬停显示内容 adasf 3、css实现div(块级元素)内显示两行或者三行,超出部分用省略号显示 ... -
11.07工作总结(鼠标悬停显示完整内容)
2019-11-07 17:00:161. 表格内容超出单元格时以省略号显示,鼠标悬停显示完整内容 https://blog.csdn.net/huangxinglian/article/details/87875049 -
EasyUI的Datagrid鼠标悬停显示单元格内容
2019-04-28 11:00:00功能描述:table鼠标悬停显示单元格内容 1.js函数 1 function hoveringShow(value) { 2 return "<span title='" + value + "'>" + value + "</span>"; 3 } 2.调用函数 1 <table id=... -
鼠标悬停显示透明文字内容
2015-08-27 11:09:00最近得出一个css规律,凡是变化的css特效,总是在不同状态之间转换,只要规定好不同状态下的样式并使用 transition 1 <!DOCTYPE html> 2 <...鼠标悬停显示透明文字内容</title... -
html鼠标悬停显示title html内容
2019-10-02 20:41:44最近碰到一个问题,鼠标悬停到A标签时显示一个div,查了一下才知道是title属性里面的内容 直接上代码 //个性title提示样式 $(function () { $("a").each(function (b) {//这里是控制标签 if (this.title)... -
jQuery鼠标悬停居中放大显示内容代码
2020-06-10 07:34:37jQuery鼠标悬停居中放大显示内容代码,当鼠标经过模块时该模块放大突出叠加展示内容详情效果。 -
EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
2017-05-05 13:33:00EasyUI Datagrid 鼠标悬停显示单元格内容 第一种方式: 1.js 定义函数 <script type="text/javascript"> //格式化单元格提示信息 function for...
收藏数
632
精华内容
252