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 相关文章推荐
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
使用typeof方法判断undefined类型
Sep 09 Javascript
js进行表单验证实例分析
Feb 10 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
JavaScript学习笔记整理_简单实现枚举类型,扑克牌应用
Sep 19 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
vue实现商城秒杀倒计时功能
Dec 12 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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中使用PDF文档功能
2006/10/09 PHP
php上传文件常见问题总结
2015/02/03 PHP
FastCGI 进程意外退出造成500错误
2015/07/26 PHP
laravel5创建service provider和facade的方法详解
2016/07/26 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
使用JQuery FancyBox插件实现图片展示特效
2015/11/16 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
批量下载对路网图片并生成html的实现方法
2016/06/07 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
详解express使用vue-router的history踩坑
2019/06/05 Javascript
浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
2019/10/23 Javascript
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
Python标准库与第三方库详解
2014/07/22 Python
Python中的ceil()方法使用教程
2015/05/14 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
使用CodeMirror实现Python3在线编辑器的示例代码
2019/01/14 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
python做接口测试的必要性
2019/11/20 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
雅诗兰黛加拿大官网:Estee Lauder加拿大
2019/07/31 全球购物
银行柜员应聘推荐信范文
2013/11/24 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
小学生新年寄语
2014/04/03 职场文书
小学语文课后反思精选
2014/04/25 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
Python中for后接else的语法使用
2021/05/18 Python