Weibw's FR
微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162
本教程视频讲解可以关注本人B站账号进行观看：次世代数据技术
一、需求描述
在使用FIneReport软件开发填报报表时，有些业务需求是希望在原有数据上直接修改然后更新提交内容，这时候我们就需要在前台高亮显示已经做出修改（不等于原值）的单元格内容。其效果如下图所示： 
针对以上需求，本文提出一种可行的方案，其大致步骤如下：
- 每次点击查询后，将每个单元格原有的值和原有的样式保存到单元格的HTML元素属性中。
- 每次控件编辑结束后通过对比修改后的值与第一步保存的原值做对比。
- 若两值不相等则增加一个高亮的样式，若两值相等则删除之前添加的样式。
注1：不支持移动端填报。注2：不支持文件上传控件。注3：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用其他版本过程中出现问题可以联系本作者。
二、示例1：默认模式
第一步
打开需要配置的模板，点击左上角 模板->模板web属性->填报页面设置->事件设置 中增加加载结束事件，并写入如下JavaScript脚本。 JavaScript 代码如下：
// 将类高亮样式通过style标签添加到网页head中
$("head").append("<style>td.td-modified{color:red !important;font-size:20px;font-weight:600}</style>");// 将类高亮样式通过style标签添加到网页head中
$("head").append("<style>td.td-modified{color:red !important;font-size:20px;font-weight:600}</style>");第二步
参数栏选中查询控件，点击添加事件添加一个初始化后事件，并写入对应的JavaScript脚本。 JavaScript 代码如下：
// 将所有td元素的值和样式保存到属性中，实际生产过程中可根据具体的元素进行添加。
$("td").each(function (i) {
$(this).attr("oldStyle", $(this).attr("style"));
$(this).attr("oldVal", $(this).text());
})// 将所有td元素的值和样式保存到属性中，实际生产过程中可根据具体的元素进行添加。
$("td").each(function (i) {
$(this).attr("oldStyle", $(this).attr("style"));
$(this).attr("oldVal", $(this).text());
})第三步
在需要控制的高亮单元的单元格控件中添加一个编辑结束事件，并写入对应的JavaScript脚本。 注：填报一般会有多个控件，如果需要控制所有的值都可以高亮则需要给所有单元格控件都添加对应事件。 JavaScript 代码如下：
// 获取修改后的值
var newVal = this.getValue();
// 获取当前控件位置
var location = this.options.location;
// 根据位置获取该位置元素保存的原值
var oldVal = $('td[id^="' + location + '-"]').attr('oldVal');
// 比较新值与原值
if (newVal != oldVal) {
// 两值不相等时增加高亮类
$('td[id^="' + location + '-"]').addClass('td-modified');
} else {
// 两值相等时移除高亮类，并将原样式填回
$('td[id^="' + location + '-"]').removeClass('td-modified');
$('td[id^="' + location + '-"]').attr("style", $('td[id^="' + location + '-"]').attr("oldStyle"))
}// 获取修改后的值
var newVal = this.getValue();
// 获取当前控件位置
var location = this.options.location;
// 根据位置获取该位置元素保存的原值
var oldVal = $('td[id^="' + location + '-"]').attr('oldVal');
// 比较新值与原值
if (newVal != oldVal) {
// 两值不相等时增加高亮类
$('td[id^="' + location + '-"]').addClass('td-modified');
} else {
// 两值相等时移除高亮类，并将原样式填回
$('td[id^="' + location + '-"]').removeClass('td-modified');
$('td[id^="' + location + '-"]').attr("style", $('td[id^="' + location + '-"]').attr("oldStyle"))
}完成以上步骤后，我们直接点击左上角的预览按钮，即可在浏览器中查看到与文章开头效果图类似的报表。
三、示例2：直接显示控件模式
第一步
打开需要配置的模板，点击左上角 模板->模板web属性->填报页面设置->事件设置 中增加加载结束事件，并写入如下JavaScript脚本。 JavaScript 代码如下：
// 将类高亮样式通过style标签添加到网页head中
$("head").append("<style>td input.td-modified{color:red !important;font-size:26px!important;font-weight:600 !important;}</style>");// 将类高亮样式通过style标签添加到网页head中
$("head").append("<style>td input.td-modified{color:red !important;font-size:26px!important;font-weight:600 !important;}</style>");第二步
参数栏选中「查询控件」，点击添加事件添加一个初始化后事件，并写入对应的JavaScript脚本。 JavaScript 代码如下：
// 将所有td元素的样式保存到属性中，实际生产过程中可根据具体的元素进行添加。
// 与默认样式不同的是，直接显示控件时，原值已经保存在元素属性中了，所以不需要手动重新保存。
$("td input").each(function (i) {
$(this).attr("oldStyle", $(this).attr("style"));
})// 将所有td元素的样式保存到属性中，实际生产过程中可根据具体的元素进行添加。
// 与默认样式不同的是，直接显示控件时，原值已经保存在元素属性中了，所以不需要手动重新保存。
$("td input").each(function (i) {
$(this).attr("oldStyle", $(this).attr("style"));
})第三步
在需要控制的高亮单元的单元格控件中添加一个编辑结束事件，并写入对应的JavaScript脚本。 注：填报一般会有多个控件，如果需要控制所有的值都可以高亮则需要给所有单元格控件都添加对应事件。。 JavaScript 代码如下：
// 获取编辑后的新值
var newVal = this.getValue();
// 获取控件位置
var location = this.options.location;
// 获取当前位置单元格的displayvalue值，该值即为原值
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"))
}// 获取编辑后的新值
var newVal = this.getValue();
// 获取控件位置
var location = this.options.location;
// 获取当前位置单元格的displayvalue值，该值即为原值
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"))
}完成以上步骤后，我们直接点击左上角的预览按钮，即可在浏览器中查看到与文章开头效果图类似的报表。
四、模板文件下载
链接: https://pan.baidu.com/s/15LLf5mgeaMK9Rz1yErbSvw?pwd=k2b2 提取码: k2b2 复制这段内容后打开百度网盘手机App，操作更方便哦
如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。