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

编辑
文档创建者:yets11 (67190 )     浏览次数:1803次     编辑次数:8次     最近更新:ukae 于 2018-08-31     

目录:

1. 描述编辑

场景描述:在报表应用中,我们可以利用图形化显示数据来显示评分等功能效果,但是在报表实际应用中,如何实现动态星星评分效果呢?

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

222

2. 思路编辑

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

3. 操作步骤编辑

3.1 准备图片

首先我们需要准备评分时的星星图片,选中和未选中的,如下图:

选中时222
未选中时222
分别命名为on.png和off.png,放置在报表安装的 %FR_HOME%\webapps\webroot\help\picture目录下。
注意:图片可以点击右键下载。
3.2 新建模板 

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

222

注:在填报中,如果需要提交最后的评分,对应的分数字段指向此单元格即可。
3.3 修改评分区单元格样式及形态

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

222

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

222
3.4 填报页面设置

点击模板>模板web属性>填报页面设置,为模板添加加载结束事件,如下图:

222

代码如下:

$("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. 已完成模板编辑

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

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

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

此页面有帮助吗? [ 去社区提问 ]