当前位置：首页 > ds >正文

finereport普通报表设置冻结列后实现点击单元格整行背景变色

ds 2025/5/1 6:49:41

最近做帆软报表碰到个需求是点击某个单元格，该单元格所在行的背景变色，查询到帆软官方的方法：
_g().addEffect(‘highlightRow’,
{
color: ‘thistle’,
trigger: ‘mousedown’,
});
发现该方法对添加了冻结列的方法不生效，因为帆软添加冻结列后展示的表格默认是两个模块，于是借助ai工具生成了一段代码，实现了包含冻结列的这个功能。

模板->模板web属性

2.选择合适的报表打开方式后，左下角添加一个加载结束控件在这里插入图片描述
3.代码写入，根据实际情况更改首行的背景色

var background_color = “#86b4d9”; // 新背景色
var frozen_back_color = new Array();
var back_color = new Array();
var $last_tr;
var i = 0;

// 为所有具有 ‘x-table’ 类的表格的每一行绑定鼠标点击事件
$(“.x-table tr”).bind(“click”, function () {
// 检查 $last_tr 是否已经定义 if (typeof($ last_tr) != “undefined”) {
// 检查当前行是否有 id 属性
if (typeof( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots if (typeof($ (“#content-container #frozen-west”).attr(“id”)) != “undefined”) {
// 遍历与 $last_tr 具有相同 id 的元素
$(“#content-container #” + $last_tr.attr(“id”)).each(function () {
// 遍历当前行的每个单元格
$(this).children(“td”).each(function () {
// 将单元格的背景颜色恢复为之前存储的原始颜色
$this).css("background-color", frozen_back_color[i][$ (this).index()]);
});
// 计数器加 1
i = i + 1;
});
// 重置计数器
i = 0;
} else {
// 遍历 $last_tr 的每个单元格
$last_tr.children(“td”).each(function () {
// 将单元格的背景颜色恢复为之前存储的原始颜色
$this).css("background-color", back_color[$ (this).index()]);
});
}
// 清空存储冻结列原始背景颜色的数组
frozen_back_color = [];
// 清空存储普通列原始背景颜色的数组
back_color = [];
}
}
// 检查当前行是否有 id 属性
if (typeof( $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots if (typeof($ (“#content-container #frozen-west”).attr(“id”)) != “undefined”) {
// 遍历与当前行具有相同 id 的元素
$(“#content-container #” + $(this).attr(“id”)).each(function () {
// 初始化一个新的数组来存储当前行的原始背景颜色
frozen_back_color[i] = new Array();
// 遍历当前行的每个单元格
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots_back_color[i][$ (this).index()] = $(this).css(“background-color”);
// 将当前单元格的背景颜色设置为新的背景颜色
$(this).css(“background-color”, background_color);
});
// 计数器加 1
i = i + 1;
});
// 重置计数器
i = 0;
} else {
// 遍历当前行的每个单元格
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots back_color[$ (this).index()] = $(this).css(“background-color”);
// 将当前单元格的背景颜色设置为新的背景颜色
$(this).css(“background-color”, background_color);
});
}
}
// 记录当前点击的行
$last_tr = $(this);
});