EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
1:这个东西是我抄的(抄的哪儿的我就想不起来了--)弹出的窗没有样式不是很好看
//扩展 $.extend($.fn.datagrid.methods,{ /** *开打提示功能 *@param{}jq *@param{}params提示消息框的样式 *@return{} */ doCellTip:function(jq,params){ functionshowTip(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' }); }; returnjq.each(function(){ vargrid=$(this); varoptions=$(this).data('datagrid'); if(!options.tooltip){ varpanel=grid.datagrid('getPanel').panel('panel'); vardefaultCls={ 'border':'1pxsolid#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' } vartooltip=$("<div></div>").appendTo('body'); tooltip.css($.extend({},defaultCls,params.cls)); options.tooltip=tooltip; panel.find('.datagrid-body').each(function(){ vardelegateEle=$(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); varthat=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){ varthat=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){ returnjq.each(function(){ vardata=$(this).data('datagrid'); if(data.tooltip){ data.tooltip.remove(); data.tooltip=null; varpanel=$(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:
functiondoCellTip(){ $('#dg').datagrid('doCellTip',{'max-width':'100px'}); } functioncancelCellTip(){ $('#dg').datagrid('cancelCellTip'); }
调用方法2:
onLoadSuccess:function(data){ $('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000}); }
以上所述是小编给大家介绍的EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!