FineReport JS实现分页预览改变鼠标悬停所在的行列的背景色
一:需求描述
1)鼠标滑过及悬停时改变行的颜色。
2)鼠标滑过及悬停时改变列的颜色。
3)鼠标滑过及悬停时改变同时行和列的颜色。
二:实现思路
鼠标滑入悬停时,先遍历获取该行所有单元格的原背景色,再遍历修改为新背景色,鼠标离开时恢复当前行所有单元格为原背景色。
三:制作流程
点击模板>模板web属性>分页预览设置 ,选择为该模板单独设置,然后添加加载结束事件,具体js如下:
3.1.1悬停变色
var background_color = "rgb(255,0,0)"; //新背景色
var frozen_back_color = new Array();
var back_color = new Array();
var $last_tr;
var i = 0;
$(".x-table tr").bind("mouseenter", function () {
if (typeof($last_tr) != "undefined") {
if (typeof($(this).attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $last_tr.attr("id")).each(function () {
$(this).children("td").each(function () {
$(this).css("background-color", frozen_back_color[i][$(this).index()]);
});
i = i + 1;
});
i = 0;
} else {
$last_tr.children("td").each(function () {
$(this).css("background-color", back_color[$(this).index()]);
});
}
frozen_back_color = [];
back_color = [];
}
}
if (typeof($(this).attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $(this).attr("id")).each(function () {
frozen_back_color[i] = new Array();
$(this).children("td").each(function () {
frozen_back_color[i][$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
i = i + 1;
});
i = 0;
} else {
$(this).children("td").each(function () {
back_color[$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
}
}
});
$(".x-table tr").bind("mouseleave", function () {
if (typeof($(this).attr("id")) != "undefined") {
$last_tr = $(this);
}
});
3.2改变列颜色
var background_color = "rgb(255,0,0)";//新背景色
var back_color = new Array();
var last_col = "";
var current_col = "";
$(".x-table td[id]").bind("mouseenter", function () {
if (last_col != "") {
$("td[id^='" + last_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == last_col) {
return $(this);
}
}).each(function () {
$(this).css("background-color", back_color[$(this).parent("tr").attr("tridx")]);
});
back_color = [];
last_col = "";
}
if (typeof($(this).attr("id")) != "undefined") {
current_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
$("td[id^='" + current_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
return $(this);
}
}).each(function () {
back_color[$(this).parent("tr").attr("tridx")] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
current_col = "";
}
});
$(".x-table td[id]").bind("mouseleave", function () {
if (typeof($(this).attr("id")) != "undefined") {
last_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
}
});
3.3改变行列颜色
var background_color = "rgb(255,0,0)";//新背景色
var row_frozen_back_color = new Array();
var row_back_color = new Array();
var $last_tr;
var i = 0;
var col_back_color = new Array();
var last_col = "";
var current_col = "";
$(".x-table td[id]").bind("mouseenter", function () {
if (typeof($last_tr) != "undefined") {
if (typeof($(this).parent("tr").attr("id")) != "undefined") {
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $last_tr.attr("id")).each(function () {
$(this).children("td").each(function () {
$(this).css("background-color", row_frozen_back_color[i][$(this).index()]);
});
i = i + 1;
});
i = 0;
} else {
$last_tr.children("td").each(function () {
$(this).css("background-color", row_back_color[$(this).index()]);
});
}
row_frozen_back_color = [];
row_back_color = [];
}
}
if (last_col != "") {
$("td[id^='" + last_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == last_col) {
return $(this);
}
}).each(function () {
$(this).css("background-color", col_back_color[$(this).parent("tr").attr("tridx")]);
});
col_back_color = [];
last_col = "";
}
if (typeof($(this).attr("id")) != "undefined") {
current_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
$("td[id^='" + current_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
return $(this);
}
}).each(function () {
col_back_color[$(this).parent("tr").attr("tridx")] = $(this).css("background-color");
});
if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") {
$("#content-container #" + $(this).parent("tr").attr("id")).each(function () {
row_frozen_back_color[i] = new Array();
$(this).children("td").each(function () {
row_frozen_back_color[i][$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
i = i + 1;
});
i = 0;
} else {
$(this).parent("tr").children("td").each(function () {
row_back_color[$(this).index()] = $(this).css("background-color");
$(this).css("background-color", background_color);
});
}
$("td[id^='" + current_col + "']").filter(function () {
if ($(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "") == current_col) {
return $(this);
}
}).each(function () {
$(this).css("background-color", background_color);
});
current_col = "";
}
});
$(".x-table td[id]").bind("mouseleave", function () {
if (typeof($(this).attr("id")) != "undefined") {
last_col = $(this).attr("id").split("-")[0].replace(/[^a-zA-Z]/g, "");
}
if (typeof($(this).parent("tr")) != "undefined") {
$last_tr = $(this).parent("tr");
}
});
FineReport JS实现分页预览改变鼠标悬停所在的行列的背景色相关推荐
- [财务][数据化分析][帆软]报表设计-分页预览
[财务][数据化分析][帆软]报表设计-分页预览 1. 概述 分页预览即普通预览模式,FineReport 的默认预览方式,一般在只需要查看报表数据用于分析的时候使用. 下面我们以内置的 Gettin ...
- vue-pdf+element实现全屏窗口pdf分页预览,pdf打印实现和解决打印乱码
一.源码 vue-pdf打印实现和乱码解决https://download.csdn.net/download/lucky_fang/85498529 二.全屏窗口打印预览效果 分页预览pdf 窗口采 ...
- 本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
- 上传身份证照片js_html+css+js 实现拍照预览上传图片功能
前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩 ...
- js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
//js本地图片预览,兼容ie[6-9].火狐.Chrome17+.Opera11+.Maxthon3 <!DOCTYPE html> <html xmlns="http: ...
- Excel使用记录之分页预览与打印标题
1.打印多页表格时建议使用分页预览,保证上下页之间连贯 2.设置了冻结首行窗格的,想要将每一页打印的内容都包含这个标题,可以使用打印标题选项
- Flex 分页预览,分页打印
Flex 打印常使用PrintDataGrid,但会有一些问题,不支持表格单元格合并,有的可能需要打印一些flex组件和容器(VBox, HBox, Text, Image)等.重写flex的Grid ...
- EXCEL分页预览 网格线
视图--分页预览 工具--选项--视图---网格线 转载于:https://blog.51cto.com/tunder168/720100
- 帆软报表获取单元格的值的几种方式,包括分页预览,填报预览,新填报预览
帆软报表获取单元格的值的方式在分页预览,填报预览,新填报预览都是不同的,没有统一的方式,这给使用者带来一定的不便.现在总结一下. 分页预览: getCellValue: function (cellP ...
最新文章
- 如何修改hosts文件?
- 基于python的天气预报系统,基于python编写的天气抓取程序
- macos 致命错误: 在类路径或引导类路径中找不到程序包 java.lang
- c不是面向对象编程语言 所以不具有面对,go 学习笔记之go是不是面向对象语言是否支持面对对象编程?...
- 【2】基于用户行为的推荐方法
- LMS Virtual Lab对发动机噪声进行仿真的2种方法
- python cmdb_Django之入门 CMDB系统 (一) 基础环境
- 【算法】剑指 Offer 61. 扑克牌中的顺子 【重刷】
- Tapestry 5 原则
- 十大常用机器学习算法总结(持续完善)
- Linux,IP归属地查询(nali)
- 【程序员金典】字符串互异
- android6自定义锁屏,Android编程之自定义锁屏实例分析
- android通知详解
- STM32F429 14. TIM_(一)_基本定时器
- Thinking in React(翻译)
- linux查看pid的用户名,在Linux中用Pstree命令及显示PID和PGID,显示命令行参数及突出显示...
- 计算机启动一下就停机,电脑启动一下就停了怎么办_电脑启动一下就停了是什么原因-win7之家...
- BZOJ3875-[Ahoi2014Jsoi2014]骑士游戏
- 百度网盘 备份mysql数据库_利用百度云免费备份SQL数据库