JS实现星级评价填报

1. 概述
1.1 应用场景

录入评分时，不再是冷冰冰的数字，动态星级评价让评分过程更加方便和灵活，如下图所示：

1.2 实现思路

模板添加加载结束事件，前端预览时点击星星可以控制星星是否点亮，并给分值赋值。

2. 示例
2.1 准备图片

引入外部图片用于展示星星未点亮和点亮时的状态，点击下载图片：off.png、on.png，放置在%FR_HOME%\webapps\webroot\help\picture目录下。

2.2 设计表格

设计填报表格，其中 B2 单元格插入数据列，且设置为纵向扩展；C2~G2 为评分区，写入分值 1~5 ；H2 单元格用于显示最终分值，如下图所示：

2.3 修改评分区单元格样式

为了让评分区单元格初始化时显示未评分状态，需要给单元格添加背景图片，即 off.png，如下图所示：

2.4 修改评分区单元格形态

评分区的数字用于给 H2 单元格赋值，前端预览时需要隐藏这些数字。选中 C2~G2 单元格，选择右侧单元格属性表>形态，设置单元格公式形态，公式为=""，如下图所示：

2.5 添加事件

点击模板>模板 Web 属性>填报页面设置，为模板添加加载结束事件，如下图所示：

JavaScript 代码如下：

1. $("td").mouseover(function(){
   
2.         var $td=$(this);
   
3.         var rownum = parseInt($td.attr('row'));
   
4.         var col=parseInt($td.attr('col'));
   
5.         if(rownum>0&&col>0&&col<7){
   
6.                 //从第3列到第7列，对应的col为2-6
   
7.                 for(var i=2;i<=col;i++){
   
8.                 $("td[row="+ rownum +"][col="+i+"]").css('background',"url(/webroot/help/picture/on.png) no-repeat 50% 50%");
   
9.                 };               
   
10.                 //在此单元格之前的星星为选中状态
    
11.                 for(var i=col+1;i<7;i++){
    
12.                 $("td[row="+ rownum +"][col="+i+"]").css('background',"url(/webroot/help/picture/off.png) no-repeat 50% 50%");
    
13.                 };                        
    
14.                 //在此单元格之后的星星为未选中状态
    
15.         }
    
16. }).mouseout(function(){
    
17.         //鼠标移出单元格
    
18.         var $td=$(this);
    
19.         var rownum = parseInt($td.attr('row'));
    
20.         var col=parseInt($td.attr('col'));
    
21.         if(rownum>0&&col>0&&col<7){
    
22.             for(var i=2;i<7;i++){
    
23.                 $("td[row="+ rownum +"][col="+i+"]").css('background',"url(/webroot/help/picture/off.png) no-repeat 50% 50%");
    
24.                 };                        
    
25.                 //初始化所有单元格为未选中状态
    
26.         var score=contentPane.curLGP.getCellValue(7,rownum) * 1;
    
27.         if(score>=1){
    
28.                 for(var i=2;i<=score+1;i++){
    
29.                    $("td[row="+ rownum +"][col="+i+"]").css('background',"url(/webroot/help/picture/on.png) no-repeat 50% 50%");
    
30.                 };
    
31.                 //如果上次评分了，那么设置评分的星星为选中状态
    
32.         }
    
33.         }
    
34. }).click(function(){
    
35.         //鼠标点击单元格，即选中星星时
    
36.         var $td=$(this);
    
37.         var rownum = parseInt($td.attr('row'));
    
38.         var col=parseInt($td.attr('col'));
    
39.         if(rownum>0&&col>0&&col<7){
    
40.         var score=parseInt($td.attr('cv'));
    
41.         contentPane.setCellValue(7,rownum,score);
    
42.         }
    
43.         //点击选中星星，给G2单元格设置值
    
44. })
    

复制代码

2.6 效果预览

保存模板，选择填报预览，效果如下图所示：

注：不支持移动端预览。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\JS实现星级评价填报.cpt

点击下载模板：JS实现星级评价填报.cpt

模板不可用

下载图片：off.png、on.png，无法下载