JS实现分页预览改变鼠标悬停所在的行列的背景色

编辑
文档创建者:macro_hard (67599 )     浏览次数:5528次     编辑次数:9次     最近更新:jiangsr 于 2018-01-10     

目录:

1. 问题描述编辑

1)鼠标滑过及悬停时改变行的颜色。用 contentPane.makeHighlight('red','mouseover') 方法, 在某些情况下不满足需求。

例如:单元格直接设置或者通过条件属性设置了背景色,鼠标滑过时颜色不改变;

          报表设置了列冻结,冻结部分和非冻结部分在鼠标滑动 时不会同时变色。

2)鼠标滑过及悬停时改变列的颜色。

3)鼠标滑过及悬停时改变同时行和列的颜色。
222

2. 实现思路编辑

鼠标滑入悬停时,先遍历获取该行所有单元格的原背景色,再遍历修改为新背景色,鼠标离开时恢复当前行所有单元格为原背景色。

3. 实现步骤编辑

打开模板如:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Primary\DetailReport\Details_3.cpt,选择模板>模板web属性>分页预览设置,选择为该模板单独设置,然后添加加载结束事件,如下图:
222
实现的功能及具体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); } });

2)悬停变色+点击变色

var background_color = "rgb(255,0,0)"; //滑动新背景色 var click_background_color = "rgb(50,100,255)"; //点击新背景色 var frozen_back_color = new Array(); var back_color = new Array(); var click_frozen_back_color = new Array(); var click_back_color = new Array(); var $last_tr; var $last_click_tr; var i = 0; var j = 0; $(".x-table tr[id]").bind("mouseenter", function () { if (typeof($last_tr) != "undefined") { if (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $last_tr.attr("id") != $last_click_tr.attr("id"))) { 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" && (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $(this).attr("id") != $last_click_tr.attr("id")))) { 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); }); } } $last_tr = $(this); }); $(".x-table tr[id]").bind("mousedown", function () { if (typeof($last_click_tr) != "undefined") { if ($(this).attr("id") != $last_click_tr.attr("id")) { if (typeof($(this).attr("id")) != "undefined") { if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") { $("#content-container #" + $last_click_tr.attr("id")).each(function () { $(this).children("td").each(function () { $(this).css("background-color", click_frozen_back_color[j][$(this).index()]); }); j = j + 1; }); j = 0; } else { $last_click_tr.children("td").each(function () { $(this).css("background-color", click_back_color[$(this).index()]); }); } click_frozen_back_color = []; click_back_color = []; } } } if (typeof($(this).attr("id")) != "undefined" && (typeof($last_click_tr) == "undefined" || (typeof($last_click_tr) != "undefined" && $(this).attr("id") != $last_click_tr.attr("id")))) { click_frozen_back_color = frozen_back_color.slice(); click_back_color = back_color.slice(); if (typeof($("#content-container #frozen-west").attr("id")) != "undefined") { $("#content-container #" + $(this).attr("id")).each(function () { $(this).children("td").each(function () { $(this).css("background-color", click_background_color); }); }); } else { $(this).children("td").each(function () { $(this).css("background-color", click_background_color); }); } } $last_click_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"); } });

3.4 改变行(表头除外)颜色

有时候,悬停变色只需对部分单元格生效,并不需要对(重复/冻结)表头也做处理。如图:首行(某N行)颜色不受影响。
222

具体效果如下所示:
222

实现方法:只需要对3.1中的JavaScript脚本稍作修改即可。

首行除外:由原来的$(".x-table tr").bind("mouseenter", function () { }修改为 $('.x-table tr:gt(0)') .bind("mouseenter", function () { },行序号(N)从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:gt(0)') .bind("mouseenter", function () { //$(".x-table tr") 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[$(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 = new Array(); $(this).children("td").each(function () { frozen_back_color[$(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:gt(0)') .bind("mouseleave", function () { if (typeof($(this).attr("id")) != "undefined") { $last_tr = $(this); } });

附件列表


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

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

此页面有帮助吗?