JS实现填报中的动态星星评分效果
1. 概述
在报表应用中，我们可以利用图形化显示数据来显示评分等功能效果，但是在报表实际应用中，如何实现动态星星评分效果呢？
特别是在填报应用中，为了与前端展现的效果一致，有些需求下可能会需要用到这种效果，将最终的评分提交入库，如下图：
2. 实现思路
在FineReport应用中，我们可以灵活利用报表页面的表格、行列、单元格之间的关系，接合jquery对象鼠标移动、滑出、点击等绑定事件，非常轻松就可实现这种效果。
3. 实现过程
3.1 准备图片
首先我们需要准备评分时的星星图片，选中和未选中的，如下图：选中时
未选中时
分别命名为on.png和off.png，放置在报表安装的 %FR_HOME%\WebReport目录下。
3.2 新建模板
新建工作簿，模板样式如下，单元格均设置居中对齐即可，其中B2-F2为评分区，G2显示分值
注：在填报中，如果需要提交最后的评分，对应的分数字段指向此单元格即可。
3.3 修改评分区单元格样式及形态
1)为了让单元格初始化时显示没评分状态，我们为单元格添加背景图片，即off.png,如下图：
2)这样会使报表展示时有数字，我们需要不显示数字。选中B2:F2单元格，选择右侧单元格属性表-形态，设置单元格形态，公式=""，如下图：
3.4 填报页面设置
点击模板>模板web属性>填报页面设置，为模板添加加载结束事件，如下图：
代码如下：
$("td[row=1]").mouseover(function(){
//鼠标经过单元格,行号从0开始，因为评分在第2行，所以用row=1
var $td=$(this);
var col=parseInt($td.attr('col'));
if(col>0&&col<6){
//从第2列到第6列，对应的col为1-5
for(var i=1;i<=col;i++){
$("td[row=1][col="+i+"]").css('background',"url(/WebReport/on.png) no-repeat 50% 50%");
};
//在此单元格之前的星星为选中状态
for(var i=col+1;i<6;i++){
$("td[row=1][col="+i+"]").css('background',"url(/WebReport/off.png) no-repeat 50% 50%");
};
//在此单元格之后的星星为未选中状态
}
}).mouseout(function(){
//鼠标移出单元格
var $td=$(this);
var col=parseInt($td.attr('col'));
if(col>0&&col<6){
for(var i=1;i<6;i++){
$("td[row=1][col="+i+"]").css('background',"url(/WebReport/off.png) no-repeat 50% 50%");
};
//初始化所有单元格为未选中状态
var score=contentPane.curLGP.getCellValue('G2')*1;
if(score>=1){
for(var i=1;i<=score;i++){
$("td[row=1][col="+i+"]").css('background',"url(/WebReport/on.png) no-repeat 50% 50%");
};
//如果上次评分了，那么设置评分的星星为选中状态
}
}
}).click(function(){
//鼠标点击单元格，即选中星星时
var $td=$(this);
var col=parseInt($td.attr('col'));
if(col>0&&col<6){
var score=parseInt($td.attr('cv'));
contentPane.setCellValue('G2',null,score);
}
//点击选中星星，给G2单元格设置值
})
保存模板，选择填报预览，效果如上图。
附件列表
主题： 二次开发
标签：
已验证