基于1.3.3版本tooltip的datagrid单元格tip实现

2013年05月25日 ⁄ datagrid ⁄ 共 6122字 ⁄ 评论数 26 ⁄ 被围观 7,033 views+

文章目录

[隐藏]

在Easyui的1.3.3版本中，作者新增了tooltip组件，尽管样式看起来也不咋的，但是终归也是官方出品，同时其功能也算是比较丰富。之前我写过一篇《扩展:datagrid鼠标经过提示单元格内容》那就是用纯编码生成的tip，更为丑陋，有了Easyui 1.3.3的tooltip，我们实现起来就很容易了，直接上代码：

实现代码

$.extend($.fn.datagrid.methods, {
/**
* 开打提示功能
* @param {} jq
* @param {} params 提示消息框的样式
* @return {}
*/
doCellTip:function (jq, params) {
function showTip(showParams, td, e, dg) {
//无文本，不提示。
if ($(td).text() == "") return;
params = params || {};
var options = dg.data('datagrid');
showParams.content = '<div class="tipcontent">' + showParams.content + '</div>';
$(td).tooltip({
content:showParams.content,
trackMouse:true,
position:params.position,
onHide:function () {
$(this).tooltip('destroy');
},
onShow:function () {
var tip = $(this).tooltip('tip');
if(showParams.tipStyler){
tip.css(showParams.tipStyler);
}
if(showParams.contentStyler){
tip.find('div.tipcontent').css(showParams.contentStyler);
}
}
}).tooltip('show');
};
return jq.each(function () {
var grid = $(this);
var options = $(this).data('datagrid');
if (!options.tooltip) {
var panel = grid.datagrid('getPanel').panel('panel');
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[field]', {
'mouseover':function (e) {
//if($(this).attr('field')===undefined) return;
var that = this;
var setField = null;
if(params.specialShowFields && params.specialShowFields.sort){
for(var i=0; i<params.specialShowFields.length; i++){
if(params.specialShowFields[i].field == $(this).attr('field')){
setField = params.specialShowFields[i];
}
}
}
if(setField==null){
options.factContent = $(this).find('>div').clone().css({'margin-left':'-5000px', 'width':'auto', 'display':'inline', 'position':'absolute'}).appendTo('body');
var factContentWidth = options.factContent.width();
params.content = $(this).text();
if (params.onlyShowInterrupt) {
if (factContentWidth > $(this).width()) {
showTip(params, this, e, grid);
}
} else {
showTip(params, this, e, grid);
}
}else{
panel.find('.datagrid-body').each(function(){
var trs = $(this).find('tr[datagrid-row-index="' + $(that).parent().attr('datagrid-row-index') + '"]');
trs.each(function(){
var td = $(this).find('> td[field="' + setField.showField + '"]');
if(td.length){
params.content = td.text();
}
});
});
showTip(params, this, e, grid);
}
},
'mouseout':function (e) {
if (options.factContent) {
options.factContent.remove();
options.factContent = null;
}
}
});
});
}
});
},
/**
* 关闭消息提示功能
* @param {} jq
* @return {}
*/
cancelCellTip:function (jq) {
return jq.each(function () {
var data = $(this).data('datagrid');
if (data.factContent) {
data.factContent.remove();
data.factContent = null;
}
var panel = $(this).datagrid('getPanel').panel('panel');
panel.find('.datagrid-body').undelegate('td', 'mouseover').undelegate('td', 'mouseout').undelegate('td', 'mousemove')
});
}
});

入参列表

doCellTip方法的参数包含以下属性：

名称	参数类型	描述以及默认值
onlyShowInterrupt	string	是否只有在文字被截断时才显示tip，默认值为false，即所有单元格都显示tip。
specialShowFields	Array	需要特殊定义显示的列，比如要求鼠标经过name列时提示standName列(可以是隐藏列)的内容,specialShowFields参数可以传入：[{field:'name',showField:'standName'}]。
position	string	tip的位置，可以为top,botom,right,left。
tipStyler	object	tip内容的样式，注意要符合jquery css函数的要求。
contentStyler	object	整个tip的样式，注意要符合jquery css函数的要求。

使用示例

$('#dg').datagrid('doCellTip',
{
onlyShowInterrupt:false,
position:'bottom',
tipStyler:{'backgroundColor':'#fff000', borderColor:'#ff0000', maxWidth:'50px', boxShadow:'1px 1px 3px #292929'},
contentStyler:{backgroundColor:'#333', paddingLeft:'5px'}
});

效果演示

http://www.easyui.info/version/jquery-easyui-1.3.3/demo/datagrid/celltips.html