JS实现填报中的动态星星评分效果

编辑
  • 文档创建者:yets11
  • 浏览次数:3580次
  • 编辑次数:11次
  • 最近更新:Carly 于 2019-07-25
  • 1. 概述

    1.1 问题描述

    在报表应用中,我们可以利用 图形化显示数据(进度条/等级) 来显示评分等功能效果,但是在报表实际应用中,如何实现动态星星评分效果呢?

    特别是在填报应用中,为了与前端展现的效果一致,有些需求下可能会需要用到这种效果,将最终的评分提交入库,如下图:

    1.2 思路

    在 FineReport 应用中,我们可以灵活利用报表页面的表格、行列、单元格之间的关系,接合 jQuery 对象鼠标移动、滑出、点击等绑定事件,非常轻松就可实现这种效果。

    2. 操作步骤

    2.1 准备图片

    首先我们需要准备评分时的星星图片,选中和未选中的,分别命名为 on.pngoff.png,放置在报表安装的 %FR_HOME%\webapps\webroot\help\picture目录下。

    点击下载图片:

    off.png

    on.png

    2.2 新建模板 

    新建工作簿,模板样式如下,单元格均设置居中对齐即可,其中 B2-F2 为评分区,G2 显示分值,如下图所示:

    注:在填报中,如果需要提交最后的评分,对应的分数字段指向此单元格即可。

    2.3 修改评分区单元格样式及形态

    1)为了让单元格初始化时显示没评分状态,我们为单元格添加背景图片,即off.png,如下图所示:

    2)这样会使报表展示时有数字,我们需要不显示数字。选中 B2-F2 单元格,选择右侧单元格属性表-形态,设置单元格形态,公式="",如下图所示:

    2.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(/webroot/help/picture/on.png) no-repeat 50% 50%");
    };
    //在此单元格之前的星星为选中状态
    for(var i=col+1;i<6;i++){
    $("td[row=1][col="+i+"]").css('background',"url(/webroot/help/picture/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(/webroot/help/picture/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(/webroot/help/picture/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单元格设置值
    })

    4. 预览效果

    保存模板,选择填报预览,效果如上图。

    注:经过测试,手机端和 H5 不支持该效果。

    5. 已完成模板

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\05-JS实现填报中的动态星星评分效果.cpt

    点击下载模板:05-JS实现填报中的动态星星评分效果.cpt


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]