JS实现预览报表改变鼠标悬停所在单元格的样式

编辑
文档创建者:yiyemeiying (78157 )     浏览次数:1655次     编辑次数:10次     最近更新:ukae 于 2018-08-13     

目录:

1. 描述编辑

当我们在设计决策报表时,可能会遇到这样的需求:当鼠标滑过报表块单元格时,添加不同的显示效果。但由于决策报表的特殊性,不能像普通CPT文件通过添加加载结束事件来实现。这时,我们该如何来实现此功能呢?

效果一、多个报表块效果相同,滑动到单元格时字体显示红色+下划线

222

效果二、多个报表块效果不同,报表块一:滑动到单元格时字体显示红色+下划线;报表块二:黄色+下划线

222

2. 思路编辑

在决策报表添加初始化后事件,通过setTimeout()延时函数来实现相同的功能。

3. 操作步骤编辑

报表块一和报表块二当鼠标移动到各种单元格上时,显示的样式相同

3.1 示例一

1)数据准备

新建决策报表并创建二个数据集ds1,ds2,如图所示:

ds1:SELECT 类别ID,类别名称,说明 FROM 类别 order by 类别ID desc

ds2:SELECT 类别ID,类别名称,说明 FROM 类别 order by 类别ID 

222

2)样式事件定义

选择 当前控件-body->事件->初始化后 添加JS脚本:

222

JavaScript脚本:

setTimeout(function() { $(".x-table td").mousemove(function() { //鼠标经过时,改变当前单元格背景为红色 $(this).css("color", "red"); //鼠标经过时,当前单元格字体加粗 $(this).css("font-weight", "bold"); //鼠标经过时,当前单元格添加下划线 $(this).css("text-decoration", "underline"); }); $(".x-table td").mouseout(function() { //鼠标离开后,恢复当前单元格黑色 $(this).css("color", "black"); $(this).css("font-weight", "normal"); //鼠标离开后,当前单元格取消下划线 $(this).css("text-decoration", "none"); }); }, 1000);

3)保存并预览,效果如上图。

3.2 示例二

报表块一与报表块二在当鼠标移动到各种单元格上时,显示的样式不同。

1)同理,修改示例一的JS脚本

222
setTimeout(function() { $(".REPORT0table td").mousemove(function() { //鼠标经过时,改变当前单元格背景为红色 $(this).css("color", "red"); //鼠标经过时,当前单元格字体加粗 $(this).css("font-weight", "bold"); //鼠标经过时,当前单元格添加下划线 $(this).css("text-decoration", "underline"); }); $(".REPORT0table td").mouseout(function() { //鼠标离开后,恢复当前单元格黑色 $(this).css("color", "black"); $(this).css("font-weight", "normal"); //鼠标离开后,当前单元格取消下划线 $(this).css("text-decoration", "none"); }); $(".REPORT1table td").mousemove(function() { //鼠标经过时,改变当前单元格背景为红色 $(this).css("color", "#BB9544"); //鼠标经过时,当前单元格字体加粗 $(this).css("font-weight", "bold"); //鼠标经过时,当前单元格添加下划线 $(this).css("text-decoration", "underline"); }); $(".REPORT1table td").mouseout(function() { //鼠标离开后,恢复当前单元格黑色 $(this).css("color", "black"); $(this).css("font-weight", "normal"); //鼠标离开后,当前单元格取消下划线 $(this).css("text-decoration", "none"); }); }, 1000);

注:在脚本中使用js选择器时,对应的报表块是有规律的。如REPORT0table ,REPORT1table ,REPORT2table …

2)保存并预览,效果如上图。

4. 预览效果编辑

4.1 PC端预览效果

1)示例一

222

2)示例二

222

4.2 移动端预览效果

注:不支持移动端。

5. 已完成模板编辑

1)示例一
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\02-JS实现预览报表改变鼠标悬停所在单元格的样式-示例一.frm
2)示例二
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\02-JS实现预览报表改变鼠标悬停所在单元格的样式-示例一.frm

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗? [ 去社区提问 ]