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

前端之家收集整理的这篇文章主要介绍了EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1:这个东西是我抄的(抄的哪儿的我就想不起来了- -)弹出的窗没有样式 不是很好看

提示功能 * @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 = $("
").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,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:

调用方法2:

以上所述是小编给大家介绍的EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/js/46345.html

猜你在找的JavaScript相关文章