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

最新推荐文章于 2023-07-03 17:21:56 发布

hzp666

最新推荐文章于 2023-07-03 17:21:56 发布

阅读量924

点赞数

分类专栏：帆软文章标签：帆软 finereport 可视化

帆软专栏收录该内容

125 篇文章 26 订阅

订阅专栏

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属性>填报页面设置，为模板添加加载结束事件，如下图：

代码如下：

$("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单元格设置值
})