1. 描述
场景描述：在报表应用中，我们可以利用图形化显示数据(进度条/等级)来显示评分等功能效果，但是在报表实际应用中，如何实现动态星星评分效果呢？
特别是在填报应用中，为了与前端展现的效果一致，有些需求下可能会需要用到这种效果，将最终的评分提交入库，如下图：
2. 思路
在FineReport应用中，我们可以灵活利用报表页面的表格、行列、单元格之间的关系，接合jquery对象鼠标移动、滑出、点击等绑定事件，非常轻松就可实现这种效果。
3. 操作步骤
3.1 准备图片
首先我们需要准备评分时的星星图片，选中和未选中的，如下图：
选中时
未选中时
分别命名为on.png和off.png，放置在报表安装的 %FR_HOME%\webapps\webroot\help\picture目录下。
注意：图片可以点击右键下载。
3.2 新建模板
新建工作簿，模板样式如下，单元格均设置居中对齐即可，其中B2-F2为评分区，G2显示分值
注：在填报中，如果需要提交最后的评分，对应的分数字段指向此单元格即可。
3.3 修改评分区单元格样式及形态
1）为了让单元格初始化时显示没评分状态，我们为单元格添加背景图片，即off.png,如下图：
2）这样会使报表展示时有数字，我们需要不显示数字。选中B2-F2单元格，选择右侧单元格属性表-形态，设置单元格形态，公式=""，如下图：
3.4 填报页面设置
点击模板>模板web属性>填报页面设置，为模板添加加载结束事件，如下图：
代码如下：
<span style="color:#334356"><span style="color:#1bc1a1"><img data-cke-saved-src="http://help.finereport.com/js/clipboard/clippy.png" src="http://help.finereport.com/js/clipboard/clippy.png" alt="Copy to clipboard" class="clippy" /><code>$(<span style="color:#dd1144">"td[row=1]"</span>).mouseover(<span style="color:teal">function</span>(){
<span style="color:#999988"><em>//鼠标经过单元格,行号从0开始，因为评分在第2行，所以用row=1</em></span>
<span style="color:teal">var</span> $td=$(<span style="color:teal">this</span>);
<span style="color:teal">var</span> col=<span style="color:#0086b3">parseInt</span>($td.attr(<span style="color:#dd1144">'col'</span>));
<span style="color:teal">if</span>(col><span style="color:teal">0</span>&&col<<span style="color:teal">6</span>){
<span style="color:#999988"><em>//从第2列到第6列，对应的col为1-5</em></span>
<span style="color:teal">for</span>(<span style="color:teal">var</span> i=<span style="color:teal">1</span>;i<=col;i++){
$(<span style="color:#dd1144">"td[row=1][col="</span>+i+<span style="color:#dd1144">"]"</span>).css(<span style="color:#dd1144">'background'</span>,<span style="color:#dd1144">"url(/webroot/help/picture/on.png) no-repeat 50% 50%"</span>);
};
<span style="color:#999988"><em>//在此单元格之前的星星为选中状态</em></span>
<span style="color:teal">for</span>(<span style="color:teal">var</span> i=col+<span style="color:teal">1</span>;i<<span style="color:teal">6</span>;i++){
$(<span style="color:#dd1144">"td[row=1][col="</span>+i+<span style="color:#dd1144">"]"</span>).css(<span style="color:#dd1144">'background'</span>,<span style="color:#dd1144">"url(/webroot/help/picture/off.png) no-repeat 50% 50%"</span>);
};
<span style="color:#999988"><em>//在此单元格之后的星星为未选中状态</em></span>
}
}).mouseout(<span style="color:teal">function</span>(){
<span style="color:#999988"><em>//鼠标移出单元格</em></span>
<span style="color:teal">var</span> $td=$(<span style="color:teal">this</span>);
<span style="color:teal">var</span> col=<span style="color:#0086b3">parseInt</span>($td.attr(<span style="color:#dd1144">'col'</span>));
<span style="color:teal">if</span>(col><span style="color:teal">0</span>&&col<<span style="color:teal">6</span>){
<span style="color:teal">for</span>(<span style="color:teal">var</span> i=<span style="color:teal">1</span>;i<<span style="color:teal">6</span>;i++){
$(<span style="color:#dd1144">"td[row=1][col="</span>+i+<span style="color:#dd1144">"]"</span>).css(<span style="color:#dd1144">'background'</span>,<span style="color:#dd1144">"url(/webroot/help/picture/off.png) no-repeat 50% 50%"</span>);
};
<span style="color:#999988"><em>//初始化所有单元格为未选中状态</em></span>
<span style="color:teal">var</span> score=contentPane.curLGP.getCellValue(<span style="color:#dd1144">'G2'</span>)*<span style="color:teal">1</span>;
<span style="color:teal">if</span>(score>=<span style="color:teal">1</span>){
<span style="color:teal">for</span>(<span style="color:teal">var</span> i=<span style="color:teal">1</span>;i<=score;i++){
$(<span style="color:#dd1144">"td[row=1][col="</span>+i+<span style="color:#dd1144">"]"</span>).css(<span style="color:#dd1144">'background'</span>,<span style="color:#dd1144">"url(/webroot/help/picture/on.png) no-repeat 50% 50%"</span>);
};
<span style="color:#999988"><em>//如果上次评分了，那么设置评分的星星为选中状态</em></span>
}
}
}).click(<span style="color:teal">function</span>(){
<span style="color:#999988"><em>//鼠标点击单元格，即选中星星时</em></span>
<span style="color:teal">var</span> $td=$(<span style="color:teal">this</span>);
<span style="color:teal">var</span> col=<span style="color:#0086b3">parseInt</span>($td.attr(<span style="color:#dd1144">'col'</span>));
<span style="color:teal">if</span>(col><span style="color:teal">0</span>&&col<<span style="color:teal">6</span>){
<span style="color:teal">var</span> score=<span style="color:#0086b3">parseInt</span>($td.attr(<span style="color:#dd1144">'cv'</span>));
contentPane.setCellValue(<span style="color:#dd1144">'G2'</span>,null,score);
}
<span style="color:#999988"><em>//点击选中星星，给G2单元格设置值</em></span>
})</code></span></span>4. 预览效果
保存模板，选择填报预览，效果如上图。
注：经过测试，手机端和h5不支持该效果。
5. 已完成模板
模板效果在线查看请点击：JS实现填报中的动态星星评分效果.cpt
已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\05-JS实现填报中的动态星星评分效果.cpt