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 相关文章推荐
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
详解JavaScript的策略模式编程
Jun 24 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
微信小程序 基础组件与导航组件详细介绍
Feb 21 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
Vue 页面跳转不用router-link的实现代码
Apr 12 Javascript
JavaScript获取某一天所在的星期
Sep 05 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 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
实用函数8
2007/11/08 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
PHP使用curl制作简易百度搜索
2016/11/03 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
MUI 上拉刷新/下拉加载功能实例代码
2017/04/13 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
Node.js API详解之 console模块用法详解
2020/05/12 Javascript
python冒泡排序简单实现方法
2015/07/09 Python
Python 备份程序代码实现
2017/03/06 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
后勤主管工作职责
2013/12/07 职场文书
自我鉴定书
2014/03/24 职场文书
《分一分》教学反思
2014/04/13 职场文书
党员承诺践诺书
2014/05/20 职场文书
质量主管工作职责
2014/09/26 职场文书
2014年内勤工作总结
2014/11/24 职场文书
无锡灵山大佛导游词
2015/02/09 职场文书
2016新年年会主持词
2015/07/06 职场文书
SpringBoot+VUE实现数据表格的实战
2021/08/02 Java/Android
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技