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

网络编程 2024/11/15 佚名

3 2 1

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 
"htmlcode">

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

easyui,docelltip