在各种涉及图片的 Web 网站上,无论是搜图类、社交类、保险服务类,以及 ERP 或档案管理等内部系统,其中对于图片通常会提供一种点击图片查看原图的操作,也就是一开始呈现小图,点击后放大查看。这种操作我们能在报表中实现吗?如果可以的话,该怎么做?是不是需要许多关于前端页面的知识准备呢?

下面我就对于上面抛出来的疑问一一解答下:润乾报表可以实现!通过 Dashboard+ 超链接局部刷新就可以!不需知道很多前端的知识就能实现哦!!!

接下来,我们就用润乾设计器下自带的 demo 数据源中的雇员表做一个雇员信息的查询,在点击雇员信息后在页面中显示出 TA 的照片,并在页面的右侧显示原图。

  • 雇员信息表的创建
  • 定义参数

在“报表”菜单中选择“参数”选项,增加 arg1 的参数,数据类型为字符串,值表达式为 1(给定值表达式后,如果不输入值,第一次查询使用的就是该参数值),参数类型为普通参数。

  • 数据集设置
  • 报表格式设置
  • 图片所在单元格设置

选中 E2 单元格,选择“报表”——“图片”菜单,或者右键单击该单元格选择“图片”,在弹出的对话框中设置表达式为 =ds1. 照片。

  • 超链接设置

在 E2 单元格的属性中设置超链接表达式,具体设置如下图所示。

2. 显示图片的报表

  • 定义参数

定义一个名为 id 的普通参数,类型为字符串,这里的参数名称要和第一张报表里超链接传递过来的参数名一致哦!

  • 数据集设置

这张报表我们只需要根据员工的 ID 查出对应的照片字段就可以,所以这里的 sql 也是通过 id 这个参数做的数据过滤。

  • 报表图片单元格设置

我们要将显示的图片变大的话,可以直接设置图片所在单元格的尺寸调整方式为“图片填满单元格”就行了,不需要再设置图片的高度,宽度等 html 属性啦。

3. 设置布局

  • 创建报表组,添加雇员信息表和显示原图的报表
  • 添加参数定义
  • 进行布局

润乾报表新版本中报表组默认是 tab 页方式展现,当在 dashboard 面板中设置布局后,多张报表就会按 dashboard 面板设置的布局展现。

  • 参数查询报表
  • 定义数据集

为了让这个例子按上去更像实际的情况,我们提供一个下拉框,用户可以在这里直接选择雇员的 ID。首先给这个参数报表定义数据集。

  • 然后定义下拉选择员工 ID 单元格的控件及变量名

选中 D2 单元格,设置编辑风格为下拉数据集:

好了,通过以上步骤,我们完成了一个通过下拉框查询员工信息,并在卡片式的员工信息表中能够点击图片,在当前页面右侧显示员工照片原图的实例,快来 web 端看一下效果吧!

当然,针对这样的需求,其实我们也可以响应图片上的 onclick 事件,弹出一个网页窗口或者 dialog 窗口。不过,这种方法相对于本文所提到的方法呢就需要多了解一些页面的知识了。在本文的例子中,我们只需要通过 dashboard 的局部刷新 JS 函数,就能让原图在一个页面中无闪烁显示出来。

dashboardlink 用处多多,除了本文的例子,我们还可以通过它实现在国家地图钻取省份地图数据、在一个页面中列表与图表联动,以及特殊的查询面板布局等,这些例子,拾光都在博客有写过哦!多多关注我们吧!相信您的关注会让我们更加进步,我们的进步会给您带来更多的价值!

更多动态交互的页面效果请查看:前端效果导航
*报表实时刷新显示时间
*HTML 事件 – 鼠标移入高亮显示
*鼠标悬停出现提示信息怎么做
*报表怎样实现滚动的公告效果?

弹出查看图片_报表工具如何实现“点击查看原图”相关推荐

  1. 禁止程序接收鼠标事件的工具_报表工具html事件--鼠标悬停出现提示信息

    概述 – 提示:指启示,提起注意或给予提醒和解释. 在 excel 中会经常用到给某个格子增加提醒信息,比如金额提示输入数值或最大长度值等等.设置方式也有多种,简单的,仅为单元格插入批注就可以了,也有 ...

  2. 基于jQuery向下弹出遮罩图片相册

    今天给大家分享一款基于jQuery向下弹出遮罩图片相册.单击相册图片时,一个遮罩层从上到下动画出现.然后弹出显示图片.这款插件适用浏览器:IE8.360.FireFox.Chrome.Safari.O ...

  3. html基础总结4-实现点击图片弹出放大图片--不用插件

    实现点击图片弹出放大图片--不用插件 <td width="350"> <img height="100" width="100&q ...

  4. 使用JS完成首页定时弹出广告图片

    一.需求分析 在首页中的顶部做一个定时弹出广告图片. 二.技术分析 隐藏图片: display: none         定时操作: setInterval("显示图片的函数", ...

  5. 原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框。5秒后恢复正常。

    原生js实现如下效果: 一个按钮,点击它会弹出对话框,但5秒内再点击不会再弹出对话框.5秒后恢复正常. 第一种方式: 使用函数节流的方式(就是设置一个变量,来一个判断语句,判断这个变量的值.为真或假执 ...

  6. fastreport打印指定路径图片显示不出来_报表工具中图片文件怎么展示---本地图片--网络图片--数据库图片...

    用于报表展示的图片来源有多种,如:数据库的图片字段.服务器本地图片.网络图片等,因此,报表工具也针对多种图片来源提供了多种多样的处理方式. 下面从不同的图片来源角度,举例介绍报表工具如何设置呈现. 图 ...

  7. vue实现echarts树图修改节点图片,修改连线颜色,鼠标悬停显示详情,鼠标右键弹出菜单,搜索,导出PNG,高亮,查看节点是否还有子节点,修改树图的展示方式

    其实这些效果之前都有用js写过,但是最近在写vue项目,里面的些许语法还是有些不一样的,所以还是写一遍文章总结一下,下次遇到就可以直接用了. 如果想看js写法,可以看我别的文章 首先,实现效果入下图: ...

  8. asp.net gridview 模板列 弹出窗口编辑_如何使用极速PDF编辑器的注释工具?

    极速PDF编辑器是日常工作常用的PDF文档编辑工具,但对于它的某一些功能可能并不熟悉,下面一起看看如何使用极速PDF编辑器的注释工具给文档添加标注. 一.注释工具概览 1.注释工具:便签(附注)工具. ...

  9. 5弹出搜索框_实用小技巧,电脑总是弹出广告,手把手教你永久关闭广告弹窗...

    在使用电脑时,总是会遇到各种各样的广告弹窗.这些广告弹窗往往附属在某些实用上件,因此我们又不能卸载相应的软件.在电脑开机或者当我们正在编辑文档时,这些莫名其妙的广告弹窗很影响心情,下面教大家如何永久关 ...

最新文章

  1. ubuntu自定义命令
  2. 使用tomcat搭建Jenkins环境(centos7.3)
  3. 码code | 巧用2种方法,打破20条云开发数据库限制
  4. VideoUrlParser视频信息分析
  5. Cesium:各种坐标转换
  6. GMapping原理分析
  7. java工程师职业价值观_什么是职业价值观?舒伯职业价值观测试
  8. froala富文本编辑器的使用
  9. WebView加载网页不显示图片解决办法
  10. 网站收录有很多为什么没排名?解决办法
  11. windows10 插入耳机无弹出,无声音,提示扬声器、耳机未插入
  12. python_习题一
  13. 对上题找出最高分的学生的数据(包括学号、姓名、3门课的成绩、平均分数)。并输出
  14. 十进制换算成二进制、八进制、十六进制
  15. Windows驱动_WDDM之一
  16. REW声学测试(四):REW的测试原理
  17. cct省计算机等级有用吗,省计算机二级有用吗
  18. 哈尔滨理工大学---沼跃鱼(待整理)
  19. 知乎上已获千赞,已拿offer入职
  20. Win10激活提示“连接到internet激活windows”的最佳解决方法

热门文章

  1. 赖江山:生态学研究都在用哪些R包?
  2. 免费申领Bio-protocol单细胞研究实验方法精选集
  3. MPB:基于BIOLOG的微生物群落功能分析
  4. Genome Biology:人体各部位微生物组时间序列分析Moving Pictures
  5. NewPhy.-揭秘优势种dominant species
  6. Briefings in Bioinformatics:微生物基因组学和功能基因组学相关软件和数据库的研究进展
  7. QIIME 2用户文档. 8数据导入Importing data(2018.11)
  8. R语言ggplot2可视化:使用热力图可视化dataframe数据
  9. R语言ggplot2可视化:在选定数据点周围添加圆圈(Add Circles Around Select Data Points)
  10. R语言ggplot2可视化:为图像中的均值竖线、中位数竖线、 geom_vline添加图例(legend)