在帆软FineReport中，实现视图树点击高亮显示的效果，可以通过JavaScript脚本和条件属性的设置来完成。以下是一种实现方法：
方法一：使用JavaScript脚本实现点击高亮
配置模板属性
打开需要配置的模板。
点击左上角的“模板”菜单，选择“模板Web属性”。
在“填报页面设置”中，点击“事件设置”，增加“加载结束事件”。
写入如下JavaScript脚本，用于定义高亮样式：
javascript
复制代码
$("head").append("<style>td.td-modified{color:red !important;font-size:20px;font-weight:600}</style>");
这段代码的作用是在页面的<head>部分添加一段CSS样式，定义了一个名为td-modified的类，该类设置了文字颜色为红色，字体大小为20px，字体加粗。
保存原始值和样式
在“参数栏”中选中查询控件（例如，按钮或文本框），点击“添加事件”，添加一个“初始化后事件”。
写入如下JavaScript脚本，用于保存所有单元格的原始值和样式：
javascript
复制代码
$("td").each(function(i){
$(this).attr("oldStyle",$(this).attr("style"));
$(this).attr("oldVal",$(this).text());
});
这段代码遍历所有<td>元素，将它们的原始样式和文字内容分别保存在自定义属性oldStyle和oldVal中。
设置编辑结束事件
在需要控制高亮显示的单元格控件中添加一个“编辑结束事件”。
写入如下JavaScript脚本，用于判断并应用高亮样式：
javascript
复制代码
var newVal = this.getValue(); // 获取编辑后的新值
var location = this.options.location; // 获取控件位置
var oldVal = $('td[id^="'+location+'-"]').attr('displayvalue'); // 获取原值
if(newVal != oldVal){
$('td[id^="'+location+'-"] input').addClass('td-modified'); // 应用高亮样式
}else{
$('td[id^="'+location+'-"] input').removeClass('td-modified'); // 移除高亮样式
$('td[id^="'+location+'-"] input').attr("style", $('td[id^="'+location+'-"] input').attr("oldStyle")); // 恢复原始样式
}
这段代码获取编辑后的新值和控件位置，与保存在自定义属性中的原值进行比较。如果新值与原值不相等，则在对应的单元格控件上添加td-modified类，应用高亮样式；如果相等，则移除高亮样式，并恢复原始样式。
预览报表
完成以上步骤后，点击左上角的“预览”按钮，在浏览器中查看报表效果。
方法二：使用条件属性设置样式
虽然FineReport的条件属性主要用于设置单元格的显示格式和值，但直接通过条件属性实现视图树点击高亮显示的效果可能较为复杂，且不如JavaScript脚本灵活。不过，可以通过条件属性结合JavaScript脚本的方式，实现更复杂的高亮逻辑。
例如，可以在JavaScript脚本中根据某些条件动态设置单元格的自定义属性，然后在条件属性中根据这些自定义属性来设置单元格的样式。这种方法需要结合具体的业务需求和开发环境进行定制。
注意事项
在使用JavaScript脚本时，请确保脚本的正确性和安全性，避免引入安全漏洞或影响报表的性能。
在配置事件和脚本时，请仔细核对控件的名称和属性，确保脚本能够正确执行。
如果报表中涉及多个视图树或复杂的交互逻辑，可能需要编写更复杂的JavaScript脚本来处理各种情况。
通过以上方法，您可以在帆软FineReport中实现视图树点击高亮显示的效果，提升报表的交互性和可读性。
1min目标场景问卷
立即参与
