EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容


Posted in Javascript onAugust 24, 2016

1:这个东西是我抄的(抄的哪儿的我就想不起来了- -)弹出的窗没有样式 不是很好看

//扩展
$.extend($.fn.datagrid.methods, { 
/** 
* 开打提示功能 
* @param {} jq 
* @param {} params 提示消息框的样式 
* @return {} 
*/ 
doCellTip : function(jq, params) { 
function showTip(data, td, e) { 
if ($(td).text() == "") 
return; 
data.tooltip.text($(td).text()).css({ 
top : (e.pageY + 10) + 'px', 
left : (e.pageX + 20) + 'px', 
'z-index' : $.fn.window.defaults.zIndex, 
display : 'block' 
}); 
}; 
return jq.each(function() { 
var grid = $(this); 
var options = $(this).data('datagrid'); 
if (!options.tooltip) { 
var panel = grid.datagrid('getPanel').panel('panel'); 
var defaultCls = { 
'border' : '1px solid #333', 
'padding' : '1px', 
'color' : '#333', 
'background' : '#f7f5d1', 
'position' : 'absolute', 
'max-width' : '200px', 
'border-radius' : '4px', 
'-moz-border-radius' : '4px', 
'-webkit-border-radius' : '4px', 
'display' : 'none' 
} 
var tooltip = $("<div></div>").appendTo('body'); 
tooltip.css($.extend({}, defaultCls, params.cls)); 
options.tooltip = tooltip; 
panel.find('.datagrid-body').each(function() { 
var delegateEle = $(this).find('> div.datagrid-body-inner').length 
? $(this).find('> div.datagrid-body-inner')[0] 
: this; 
$(delegateEle).undelegate('td', 'mouseover').undelegate( 
'td', 'mouseout').undelegate('td', 'mousemove') 
.delegate('td', { 
'mouseover' : function(e) { 
if (params.delay) { 
if (options.tipDelayTime) 
clearTimeout(options.tipDelayTime); 
var that = this; 
options.tipDelayTime = setTimeout( 
function() { 
showTip(options, that, e); 
}, params.delay); 
} else { 
showTip(options, this, e); 
} 
}, 
'mouseout' : function(e) { 
if (options.tipDelayTime) 
clearTimeout(options.tipDelayTime); 
options.tooltip.css({ 
'display' : 'none' 
}); 
}, 
'mousemove' : function(e) { 
var that = this; 
if (options.tipDelayTime) { 
clearTimeout(options.tipDelayTime); 
options.tipDelayTime = setTimeout( 
function() { 
showTip(options, that, e); 
}, params.delay); 
} else { 
showTip(options, that, e); 
} 
} 
}); 
}); 
} 
}); 
}, 
/** 
* 关闭消息提示功能 
* @param {} jq 
* @return {} 
*/ 
cancelCellTip : function(jq) { 
return jq.each(function() { 
var data = $(this).data('datagrid'); 
if (data.tooltip) { 
data.tooltip.remove(); 
data.tooltip = null; 
var panel = $(this).datagrid('getPanel').panel('panel'); 
panel.find('.datagrid-body').undelegate('td', 
'mouseover').undelegate('td', 'mouseout') 
.undelegate('td', 'mousemove') 
} 
if (data.tipDelayTime) { 
clearTimeout(data.tipDelayTime); 
data.tipDelayTime = null; 
} 
}); 
} 
});

调用方法1:

function doCellTip(){ 
$('#dg').datagrid('doCellTip',{'max-width':'100px'}); 
} 
function cancelCellTip(){ 
$('#dg').datagrid('cancelCellTip'); 
}

调用方法2:

onLoadSuccess:function(data){ 
$('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000}); 
}

以上所述是小编给大家介绍的EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Opacity.js
Jan 22 Javascript
JQuery跨Iframe选择实现代码
Aug 19 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
JavaScript实现滑动导航栏效果
Aug 30 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
微信小程序自定义波浪组件使用方法详解
Sep 21 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
JavaScript实现音乐播放器
Aug 14 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 #Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 #Javascript
总结Javascript中的隐式类型转换
Aug 24 #Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 #Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 #Javascript
JS for...in 遍历语句用法实例分析
Aug 24 #Javascript
用JS中split方法实现彩色文字背景效果实例
Aug 24 #Javascript
You might like
星际流派综述
2020/03/04 星际争霸
Extjs学习笔记之一 初识Extjs之MessageBox
2010/01/07 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
jquery获取tr并更改tr内容示例代码
2014/02/13 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
JavaScript设计模式之工厂方法模式介绍
2014/12/28 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
NodeJS读取分析Nginx错误日志的方法
2019/05/14 NodeJs
jQuery实现图片下载代码
2019/07/18 jQuery
微信小程序入门之绘制时钟
2020/10/22 Javascript
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
python with statement 进行文件操作指南
2014/08/22 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
python查看微信好友是否删除自己
2016/12/19 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
python字典一键多值实例代码分享
2019/06/14 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
python 提高开发效率的5个小技巧
2020/10/19 Python
用 python 进行微信好友信息分析
2020/11/28 Python
如何用python 操作zookeeper
2020/12/28 Python
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
生日寿宴答谢词
2014/01/19 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
毕业生面试求职信
2014/06/23 职场文书
合作经营协议书范本
2014/09/16 职场文书
2019年“红色之旅”心得体会1000字(3篇)
2019/09/27 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python