2.1 设计表格
1)新建一个普通报表,如下图设计表格:
2)选中A1单元格,在右侧面板选择单元格属性>其他,设置内容提示为:=$$$。
2.2 添加事件
点击菜单栏模板>模板web属性>分页预览设置,为该模板单独设置,添加一个加载结束事件,如下图所示:
JavaScript 代码如下:varoldTitle=null;
$('td').bind('mouseovermouseoutmousemove',function(event){
varleft=event.pageX;
vartop=event.pageY;
varele=event.target;
vartitle=ele.title;
vartype=event.originalEvent.type;
if(type=='mouseover'){
oldTitle=title;
ele.title='';
console.log(title);
if(title.length!=0){
varshowEle=$('
text:title,
class:'showTitleBox'
}).css({
position:'absolute',
top:top+10,
left:left,
border:'1pxsolid#00cccc',//边框
borderRadius:'5px',//边框圆角
background:"#00cccc",//背景色
fontFamily:'SimHei',//字体
fontSize:'15px'//字体大小
})
showEle.appendTo('body');
}
}elseif(type=='mouseout'){
ele.title=oldTitle;
$('.showTitleBox').remove();
}elseif(type=='mousemove'){
$('.showTitleBox').css({
top:top+10,
left:left
})
}
})
注:实际使用时修改或增加对应的 CSS 属性即可。
2.3 效果预览
保存报表,点击分页预览,效果如下图所示:
注:不支持移动端。