帆软填报单元格内容过多展示不全，鼠标悬浮单元格提示框展示所有内容

最新推荐文章于 2023-10-17 16:39:05 发布

hzp666

最新推荐文章于 2023-10-17 16:39:05 发布

阅读量7.5k

点赞数 2

分类专栏：帆软文章标签：帆软可视化数据可视化

本文链接：https://blog.youkuaiyun.com/hzp666/article/details/112988758

版权

帆软专栏收录该内容

125 篇文章

订阅专栏

本文介绍了如何通过CSS和JavaScript实现单元格内容在鼠标悬浮时展示全部，包括添加省略号和背景颜色动态切换的效果，以及鼠标事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单元格展示内容显示不全，鼠标悬浮后提示框展示全部，效果如下：

设置，第一步：添加形态：

"<span style='white-space: nowrap;text-overflow:ellipsis; overflow:hidden; display: inline-block;width:100%;'>"+$$$+"</span>"

第二步：其他修改

$('.reportPane')[0].style.background = "#1e243c";

var trs = $('.x-table tr');
trs.each(function(i, e) {
   if (i % 2 == 0) {
       e.style.backgroundColor = "#3e495b";
   } else {
       e.style.backgroundColor = "#353e4f";
   }
});

//var currentcell = contentPane.curLGP.currentTDCell;
//if (currentcell != undefined) {
//var currow = $('.x-table tr')[contentPane.curLGP.getTDRow(currentcell)];
//currow.style.backgroundColor = "#2f4b69";
//currow.style.borderStyle = "solid";
//currow.style.borderWidth = "3px";
//currow.style.borderColor = "#3881c6 #1e4570 #1e4570 #3881c6";
//};

//鼠标经过
$(".x-table tr").mousemove(function() {
   $(this).css("background-color", "#2f4b69");
   $(this).css("border-style", "solid");
   $(this).css("border-width", "3px");
   $(this).css("border-color", "#3881c6 #1e4570 #1e4570 #3881c6");
});
//鼠标点击
$(".x-table tr").mousedown(function() {
   $(this).css("background-color", "#2f4b69");
   $(this).css("border-style", "solid");
   $(this).css("border-width", "3px");
   $(this).css("border-color", "#3881c6 #1e4570 #1e4570 #3881c6");
});
//鼠标离开
$(".x-table tr").mouseout(function() {
   var i = $(this).context.rowIndex;
   $(this).css("border", "none");
   if (i % 2 == 0) {
       $(this).css("background-color", "#3e495b");
   } else {
       $(this).css("background-color", "#353e4f");
   }
});