历史版本1 :JS实现鼠标点击的列变色 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1.问题描述编辑

1.1鼠标滑过及悬停时改变行的颜色。用 contentPane.makeHighlight('red','mouseover') 方法, 在某些情况下不满足需求。例如:单元格直接设置或者通过条件属性设置了背景色,鼠标滑过时颜色不改变;报表设置了列冻结,冻结部分和非冻结部分在鼠标滑动 时不会同时变色。
1.2鼠标滑过及悬停时改变列的颜色。
1.3鼠标滑过及悬停时改变同时行和列的颜色。

2.实现思路编辑

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

3.实现步骤编辑

打开一模板如:%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm \LineForm.cpt模板,点击模板>模板web属性>分页预览设置 或  填报页面设置 或 数据分析设置,选择为该模板单独设置,然后添加加载结束事件,具体js如下:
  3.1改变行颜色

var background_color = "rgb(50,100,255)"; //新背景色
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(50,100,255)";//新背景色
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(50,100,255)"; 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"); } });