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

前端技术 2023/09/02 JavaScript

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实现鼠标放到单元格上提示单元格内容，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对phpstudy网站的支持！

本文地址：https://www.stayed.cn/item/6070

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案