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