快捷導(dǎo)航

EasyUI的doCellTip實(shí)現(xiàn)鼠標(biāo)放到單元格上提示單元格內(nèi)容

更新時(shí)間：2016年08月24日 11:25:14 投稿：mrr

本篇文章主要介紹了easyUI的doCellTip 就是鼠標(biāo)放到單元格上有個(gè)提示的功能，對(duì)于Javascript教程感興趣的同學(xué)可以參考一下

1:這個(gè)東西是我抄的(抄的哪兒的我就想不起來了- -)彈出的窗沒有樣式不是很好看

//擴(kuò)展
$.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); 
} 
} 
}); 
}); 
} 
}); 
}, 
/** 
* 關(guān)閉消息提示功能 
* @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; 
} 
}); 
} 
});

調(diào)用方法1:

function doCellTip(){ 
$('#dg').datagrid('doCellTip',{'max-width':'100px'}); 
} 
function cancelCellTip(){ 
$('#dg').datagrid('cancelCellTip'); 
}

調(diào)用方法2:

onLoadSuccess:function(data){ 
$('#dg').datagrid('doCellTip',{cls:{'background-color':'red'},delay:1000}); 
}

以上所述是小編給大家介紹的EasyUI的doCellTip實(shí)現(xiàn)鼠標(biāo)放到單元格上提示單元格內(nèi)容，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: