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

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

标签：单元格鼠标提示内容WebdoCellTip