/**
* 扩展两个方法
*/
$.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 id='celltip'></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;
}
});
}
});

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

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

datagrid鼠标悬浮提示的更多相关文章

  1. IntelliJ设置鼠标悬浮提示和修改快捷键

    IntelliJ设置鼠标悬浮提示和修改快捷键 设置鼠标悬浮提示 修改快捷键 进入设置菜单 删除原来的快捷键(注:你可以选择保留原来的快捷键,同时使用两个快捷键) Good Luck

  2. easyUi datagrid鼠标经过提示单元格内容

    此文章是基于 EasyUI+Knockout实现经典表单的查看.编辑 一. jquery.cellTip.js /** * 扩展两个方法 */ using('datagrid', function() ...

  3. IntelliJ IDEA设置鼠标悬浮提示

    测试代码; public interface MyInterface { /** * 我是接口方法的注释 * @param num1 我是接口方法入参的注释 * @return 我是接口方法返回值的注 ...

  4. 解决echarts 鼠标悬浮提示 文本提示问题。

    参考文章:https://www.jianshu.com/p/aa585c304660 官方文章样式详解:http://echarts.baidu.com/option.html#tooltip.fo ...

  5. IntelliJ IDEA 2017.3尚硅谷-----鼠标悬浮提示

    建议不会的直接百度取消设置

  6. Android Studio移动鼠标显示悬浮提示的设置方法

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  7. 使用layer.tips实现鼠标悬浮时触发事件提示消息实现

    代码: <body> <label id="test" onmouseover="show('test')"> 你瞅啥!?过来试试! & ...

  8. echarts —— tooltip 鼠标悬浮显示提示框属性

    最近一直在使用echarts,当然也被其中的各种属性整的头大,记录一下其中遇到的问题. tooltip:鼠标悬浮时显示的提示框. 今天想要记录的是[自定义提示框的内容],如下图,鼠标悬浮时提示框内显示 ...

  9. css实现鼠标悬浮后的提示效果

    一.概述 很多时候网站中需要在鼠标划过小图标时,悬浮出提示性的文字.比如下图: 鼠标悬浮后的效果 这种效果可以使用css中的伪类hover来实现.但有时候搞不清两个元素的嵌套关系.使用了hover却没 ...

随机推荐

  1. mysql安装错误总结

    1.若在启动mysql服务时出现如下错误,可查看错误日志找出错误原因. Error:Starting MySQL.The server quit without updating PID file ( ...

  2. 用thinkphp连接mysql数据库

    一.设置mysql数据库的参数 thinkphp\Application\Home\Conf\config.php <?php return array( //'配置项'=>'配置值' ' ...

  3. Oracle中CBO优化器简介

    Oracle中CBO优化器简介 Oracle数据库中的优化器是SQL分析和执行的优化工具.它负责制定SQL的执行计划,也就是它负责保证SQL的执行计划的效率最高,比如优化器决定Oracle以什么样的方 ...

  4. activeMQ消费消息时网络流量异常大的问题

    http://www.cnblogs.com/baibaluo/archive/2012/12/24/2748468.html#2590289 公司有一个应用,多个线程从activeMQ中取消息,随着 ...

  5. QtGui.QInputDialog

    The QtGui.QInputDialog provides a simple convenience dialog to get a single value from the user. The ...

  6. SpringMVC中使用-sqljdbc4.jar

    昨天将现在写的Web项目中的数据库由MySQL换成SQLServer,昨天想把MySQL重新安装一下,但是由于不明原因,导致无法安装. 卸载MySQL.删除安装文件.删除注册表.重启电脑.但是安装的时 ...

  7. Android系统源代码学习步骤

    目前,互联网行业正在朝着移动互联网方向强劲地发展,而移动互联网的发展离不开背后的移动平台的支撑.众所周知,如今在移动平台市场上,苹果的iOS.谷歌的Android和微软的Windows Phone系统 ...

  8. 数据库如何创建视图create view

    数据库如何创建视图     创建视图的理想步骤: 一般来说,视图创建可以分为五步走: 第一步:先考虑select语句的编写.我们知道,视图其实就是一个select语句的集合,所以,我们建立视图的第一步 ...

  9. 【NEWS】 ADempiere发布ADempiere 3.8.0路线图【2013年7月28日】

    发布源:http://osssme.org/cms/?q=node/17 本以为ADempiere”已死“,但是看到ADempiere的WIKI上大概在从5月28日开始添加WIKI以来,经过多次更新后 ...

  10. OAuth 授权timestamp refused问题

         400 timestamp_refused /oauth/request_token           两台机器161.155      两机器代码完全一致,但155部署时,启动需要OAu ...