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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
windows实现npm和cnpm安装步骤
Oct 24 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
无数据库的详细域名查询程序PHP版(2)
2006/10/09 PHP
最简单的PHP程序--记数器
2006/10/09 PHP
PHP 快速排序算法详解
2014/11/10 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
2018/01/04 Javascript
javascript、php关键字搜索函数的使用方法
2018/05/29 Javascript
JS正则表达式常见用法实例详解
2018/06/19 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
Python合并字符串的3种方法
2015/05/21 Python
Python使用修饰器执行函数的参数检查功能示例
2017/09/26 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
浅谈Python中的bs4基础
2018/10/21 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python 获取指定文件夹下的目录和文件的实现
2019/08/30 Python
Myprotein加拿大官网:欧洲第一的运动营养品牌
2018/01/06 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
会计专业应届生求职信
2013/11/24 职场文书
护士个人自我鉴定
2014/03/24 职场文书
慈善晚会策划方案
2014/05/14 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
大学生团日活动总结
2015/05/06 职场文书
亮剑观后感
2015/06/05 职场文书
名人传读书笔记
2015/06/26 职场文书
安全温馨提示语大全
2015/07/14 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android