Finereport11 单元格HTML显示tag标签

微信公众号:次世代数据技术 关注可了解更多的教程。问题或建议,请公众号留言或联系本人; 微信号:weibw162

一、需求描述

在使用FIneReport软件开发报表时,有一些业务需求是需要我们在单元格里展现一些彩色的tag标签来标记一些重点内容,其效果如下图所示: 针对以上需求,本文提出一种可行的方案,其大致步骤如下:

  1. element-tag.css样式文件放入工程目录下,并在模板中引入改css文件。
  2. 通过公式形态动态地使用html标签包裹住单元格中的值,并设置单元格以HTML形式展示。

注1:精简后的element-tag.css文件在本文档末尾下载。 注2:本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证,如果您在使用其他版本过程中出现问题可以联系本作者。

二、具体步骤

第一步

下载element-tag.css样式文件,并保存到工程目录下,具体目录:webroot>help>css 如果您是在决策报表中使用,需要在页面初始化的时候通过JS将css文件引入。具体操作为,点击右上角组件body->事件->添加事件->初始化后,并填入对应JS代码。

其中JavaScript代码如下:

ini 复制代码
 $('<link rel="stylesheet" type="text/css" href="/webroot/help/css/element-tag.css"/>').appendTo('head');

第二步

在模板中引入该css文件。具体操作为,点击左上角 模板->模板web属性->引入css->选中上一步的css文件并添加。

第三步

选中需要添加tag标签的单元格元素,点击右上角 单元格属性->形态->公式形态,并填入拼接html标签的公式: 其中,填写的公式如下:

xml 复制代码
 switch($$$,
 "男","<span class='el-tag el-tag--dark'><span class='el-tag__content'>男</span></span>",
 "女","<span class='el-tag el-tag--dark el-tag--danger'><span class='el-tag__content'>女</span></span>",
 "未知","<span class='el-tag el-tag--dark el-tag--info'><span class='el-tag__content'>未知</span></span>")

第四步

点击右上角 其他->显示内容,选中用HTML显示内容

完成以上步骤后,我们直接点击左上角的预览按钮,即可在浏览器中查看到与文章开头效果图类似的报表。

三、标签样式清单

在使用不同样式的标签时仅需要替换掉元素中对应的class值即可。

下附element-ui支持的样式,如需拷贝使用,请下载示例模板。

四、模板及样式文件下载

相关推荐
郭不耐5 小时前
DeepSeek智能时空数据分析(三):专业级地理数据可视化赏析-《杭州市国土空间总体规划(2021-2035年)》
人工智能·信息可视化·数据分析·毕业设计·数据可视化·城市规划
Aloudata12 小时前
Aloudata Agent :基于 NoETL 明细语义层的分析决策智能体
数据分析·大模型·数据管理·noetl·智能问数·智能归因·智能报告
阡之尘埃14 小时前
Python数据分析案例73——基于多种异常值监测算法探查内幕交易信息
人工智能·python·机器学习·数据分析·异常检测·无监督学习
薄荷很无奈19 小时前
CuML + Cudf (RAPIDS) 加速python数据分析脚本
python·机器学习·数据分析·gpu算力
qq_4369621819 小时前
AI数据分析的利器:解锁BI工具的无限潜力
人工智能·数据挖掘·数据分析·ai数据分析
lilye6621 小时前
精益数据分析(24/126):聚焦第一关键指标,驱动创业成功
数据挖掘·数据分析
lilye661 天前
精益数据分析(20/126):解析经典数据分析框架,助力创业增长
大数据·人工智能·数据分析
橘猫云计算机设计1 天前
springboot基于hadoop的酷狗音乐爬虫大数据分析可视化系统(源码+lw+部署文档+讲解),源码可白嫖!
数据库·hadoop·spring boot·爬虫·python·数据分析·毕业设计
云天徽上1 天前
【数据可视化-28】2017-2025 年每月产品零售价数据可视化分析
机器学习·信息可视化·数据挖掘·数据分析·零售
databook1 天前
『Plotly实战指南』--样式定制高级篇
python·数据分析·数据可视化