报表工具如何实现“点击查看原图”

简介: 点击查看原图

在各种涉及图片的 Web 网站上,无论是搜图类、社交类、保险服务类,以及 ERP 或档案管理等内部系统,其中对于图片通常会提供一种点击图片查看原图的操作,也就是一开始呈现小图,点击后放大查看。这种操作我们能在报表中实现吗?如果可以的话,该怎么做?是不是需要许多关于前端页面的知识准备呢?
下面我就对于上面抛出来的疑问一一解答下:润乾报表可以实现!通过 Dashboard+ 超链接局部刷新就可以!不需知道很多前端的知识就能实现哦!!!
接下来,我们就用润乾设计器下自带的 demo 数据源中的雇员表做一个雇员信息的查询,在点击雇员信息后在页面中显示出 TA 的照片,并在页面的右侧显示原图。
1

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

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

数据集设置
3
4
5

报表格式设置
6

图片所在单元格设置

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

超链接设置

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

  1. 显示图片的报表

定义参数

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

数据集设置

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

报表图片单元格设置

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

  1. 设置布局

创建报表组,添加雇员信息表和显示原图的报表
13

添加参数定义
14

进行布局

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

参数查询报表
定义数据集

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

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

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

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

当然,针对这样的需求,其实我们也可以响应图片上的 onclick 事件,弹出一个网页窗口或者 dialog 窗口。不过,这种方法相对于本文所提到的方法呢就需要多了解一些页面的知识了。在本文的例子中,我们只需要通过 dashboard 的局部刷新 JS 函数,就能让原图在一个页面中无闪烁显示出来。
dashboardlink 用处多多,除了本文的例子,我们还可以通过它实现在国家地图钻取省份地图数据、在一个页面中列表与图表联动,以及特殊的查询面板布局等,这些例子,拾光都在博客有写过哦!多多关注我们吧!相信您的关注会让我们更加进步,我们的进步会给您带来更多的价值!

作者:shiguang
链接:http://c.raqsoft.com.cn/article/1533395288703?r=IBelieve
来源:乾学院
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

目录
相关文章
|
1月前
随机背景个人引导页源码
随机背景个人引导页源码
44 0
随机背景个人引导页源码
|
9月前
|
数据可视化 前端开发 搜索推荐
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析(百度地图jsAPI,包含缩放控件、点线覆盖物、弹窗、标注图标分类功能)
181 0
|
4月前
|
vr&ar
visionOS空间计算实战开发教程Day 6 拖拽和点击
在之前的学习中我们在空间中添加了3D模型,但在初始摆放后就无法再对其进行移动或做出修改。本节我们在Day 5显示和隐藏的基础上让我们模型可以实现拖拽效果,同时对纯色的立方体实现点击随机换色的功能。
29 2
|
9月前
|
存储 监控 机器人
JavaRobot如何实现屏幕截图
屏幕截图是日常开发中常见且重要的功能之一,而JavaRobot提供了一种简便且高效的方式来实现屏幕截图。本文将介绍JavaRobot如何实现屏幕截图的步骤和方法。
177 0
|
9月前
|
JavaScript 数据可视化 搜索推荐
高德地图开发实战案例:使用Loca数据源展示海量点标注(海量点、自定义分类图标、聚合、信息提示、3D控件)
高德地图开发实战案例:使用Loca数据源展示海量点标注(海量点、自定义分类图标、聚合、信息提示、3D控件)
309 0
|
9月前
|
定位技术
Echarts实战案例代码(27):地理坐标图视觉引导线及富文本提示框的案例
Echarts实战案例代码(27):地理坐标图视觉引导线及富文本提示框的案例
213 0
|
11月前
|
数据管理 容器
微信小游戏开发实战9-刷新形状
本篇主要内容是为1010游戏中的刷新形状功能的实现。 如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。
63 0
聊天框(番外篇)—如何实现@功能的整体删除
上一篇文章中,我们已经初步实现了聊天输入框,但其@功能是不完善的,例如无法整体删除、无法获取除用户名以外的数据(假设用户名不是唯一的)。有问题就要想办法解决,在网上百度了一圈后,倒是有一些收获。本文就着重解决@的整体删除以及获取额外数据。
956 0
聊天框(番外篇)—如何实现@功能的整体删除
|
前端开发 数据可视化
基于canvas的粒子酷炫效果,可用作可视化大屏的背景展示,即拿即用......
基于canvas的粒子酷炫效果,可用作可视化大屏的背景展示,即拿即用......
91 0
如何实现一个丝滑的点击水波效果
本文为Varlet组件库源码主题阅读系列第九篇,读完本篇,可以了解到如何使用一个`div`创建一个点击的水波效果。
70 0