分页预览JS实例

"分页预览JS实例" 分類下的文檔該分類下有29篇文檔创建该分类下的文档
分页预览JS实例
文檔創建者:FineReportTW      創建時間:01-19 15:15      標籤:      編輯:4次    |   瀏覽:295次

摘要:索引:JS实现自动滚屏/跑马灯效果JS实现动态设置每页显示固定行数JS实现根据不同设备显示不同内容JS实现悬停单元格显示图片JS实现鼠标悬浮同时改变多行背景色JS 实现单元格提示内容换行显示jQuery[閱讀全文:]

JS实现分组内单元格无边框
文檔創建者:FineReportTW      創建時間:03-07 19:38      標籤:      編輯:7次    |   瀏覽:253次

摘要:1. 概述1.1 预期效果在设计分组报表的时候,希望相同分组内的报表没有边框,不同分组之间有边框,如下图所示(左边是原格式,右边是需求格式):1.2 实现思路利用条件属性或者 JS 来控制组内边框显示与[閱讀全文:]

jQuery 实现微信扫码添加联系人
文檔創建者:FineReportTW      創建時間:03-11 10:42      標籤:      編輯:5次    |   瀏覽:416次

摘要:1. 概述1.1 预期效果根据报表表格中的信息生成二维码名片,在手机通讯录中扫描二维码之后可以快速将联系人添加到通讯录中。示例二维码如下图所示:扫码上面的二维码添加联系人的效果如下图所示:1.2 实现思[閱讀全文:]

JS实现键盘翻页效果
文檔創建者:FineReportTW      創建時間:02-17 14:09      標籤:      編輯:7次    |   瀏覽:200次

摘要:1.概述1.1 问题描述当我们报表有多页时,在展示时想使用键盘的上下键、左右键或空格键实现对报表的操作,如上下键实现翻页,该如何实现呢?1.2 实现思路通过 JS 获取按下按键的键值,根据键值对报表进行[閱讀全文:]

JS实现根据不同设备显示不同内容
文檔創建者:FineReportTW      創建時間:04-16 09:19      標籤:      編輯:15次    |   瀏覽:306次

摘要:1. 概述1.1 问题描述当一张报表中内容太多,想根据预览的设备不同显示不同的内容,该怎么实现?如下图所示,模板在移动端和 PC 端预览时,展示内容不同。1.2 实现思路1)通过 JS 来判断当前是浏览[閱讀全文:]

JS实现动态数据库表获取
文檔創建者:FineReportTW      創建時間:05-06 17:22      標籤:      編輯:6次    |   瀏覽:385次

摘要:1. 概述1.1 问题描述当明细数据存在数据库多张表中时,要根据筛选条件查询这些表中数据,不同的条件对应查询不同的表数据。如数据库中存放 2020-04-15 的数据表 test_0415,存放 202[閱讀全文:]

JS实现循环遍历单元格
文檔創建者:FineReportTW      創建時間:04-26 12:57      標籤:      編輯:10次    |   瀏覽:511次

摘要:1. 概述1.1 问题描述在实际项目中,有时需要获取所有单元格的值,如下图所示:1.2 实现思路按钮控件添加点击事件,用 JavaScript 循环语句实现。2. 示例2.1 准备数据新建普通报表,新建[閱讀全文:]

JS实现首尾相接的跑马灯
文檔創建者:FineReportTW      創建時間:02-16 12:12      標籤:      編輯:20次    |   瀏覽:337次

摘要:1. 概述1.1 预期效果在进行一些集团新闻内容展示时,可能需要一种首尾相接的跑马灯滚动效果,如下图所示:1.2 实现思路单元格中添加 html 代码,用 html 显示内容,再配合 JS 实[閱讀全文:]

JS实现自动翻页效果
文檔創建者:FineReportTW      創建時間:02-17 09:16      標籤:      編輯:15次    |   瀏覽:254次

摘要:1. 概述1.1 预期效果报表在「分页预览」时,当内容过多时,会自动分页显示,若此类报表在大屏上展示时,想要实现自动切换分页的效果,该如何实现呢?如下图所示:1.2 实现思路通过给报表添加「加[閱讀全文:]

JS实现悬停单元格显示图片
文檔創建者:FineReportTW      創建時間:10-22 16:52      標籤:      編輯:4次    |   瀏覽:337次

摘要:1. 概述1.1 预期效果鼠标悬停在表格某一列中任意单元格上,便会显示设置好的图片,鼠标离开该单元格,图片消失。如下图所示:1.2 实现思路引用 CSS 磁盘文件[閱讀全文:]

JS获取分页预览单元格
文檔創建者:FineReportTW      創建時間:11-17 16:59      標籤:      編輯:15次    |   瀏覽:288次

摘要:1. 概述1.1 预期效果有时我们也需要获取分页预览的报表中的某些单元格的值进行其他操作,比如报表总行数保存在某固定单元格中,在工具栏中显示报表总行数。下面效果图中,我们获取了某单元格的值,然后对其进行[閱讀全文:]

JS实现普通报表自动轮播
文檔創建者:FineReportTW      創建時間:05-13 22:43      標籤:      編輯:19次    |   瀏覽:227次

摘要:1. 概述1.1 预期效果在实际工作中,需要实现多张报表自动轮播效果,但区别于 自动切换分页效果 及 图表手动切换。实际效果如下图所示:1.2 实现思路给报表添加「加载结束[閱讀全文:]

JS实现鼠标点击行变色
文檔創建者:FineReportTW      創建時間:11-17 17:00      標籤:      編輯:21次    |   瀏覽:295次

摘要:1. 概述1.1 预期效果在预览模板时,由于数据比较多,希望鼠标点击某行时该行高亮显示,效果如下图所示,那么如何实现呢?1.2 实现思路给模板增加加载结束事件,设置当鼠标点击当前行时,当前行为[閱讀全文:]

JS实现定时刷新报表
文檔創建者:FineReportTW      創建時間:11-17 17:01      標籤:      編輯:20次    |   瀏覽:234次

摘要:1. 概述1.1 问题描述对于监控系统,数据库中的数据是实时更新的,希望报表也能够实时更新数据,如实时监控股价走势。要如何设置才能实现报表的定时刷新呢?1.2 实现思路通过为报表模板添加「加载结束」事件[閱讀全文:]

JS实现对话框打开报表
文檔創建者:FineReportTW      創建時間:09-02 17:31      標籤:      編輯:3次    |   瀏覽:409次

摘要:1. 概述1.1 问题描述当内置的「超链接>对话框」打开报表不能满足要求时,如何通过自定 JS 实现对话框打开报表呢,如下图所示:1.2 实现思路使用 FR 内置 JS 方法 showDialog[閱讀全文:]

JS实现从子报表返回主报表
文檔創建者:FineReportTW      創建時間:02-14 10:51      標籤:      編輯:14次    |   瀏覽:352次

摘要:1. 概述1.1 场景描述在主报表中插入超链接,实现点击超链接跳转到子报表后,如何实现从子报表跳转回主报表呢?效果如下图所示:1.2 实现思路在子报表模板的工具栏添加自定义按钮,按钮的「自定义事件」内容[閱讀全文:]

JS实现自动滚屏/跑马灯效果
文檔創建者:FineReportTW      創建時間:02-15 15:18      標籤:      編輯:40次    |   瀏覽:221次

摘要:1. 概述1.1 预期效果报表页面上放置很多图表时,由于内容过多,超出了浏览器窗口的大小导致内容展示不全,这时可以使用滚屏或跑马灯来实现内容全部展示,如下图所示:1.2 实现思路给报表添加「加载结束」J[閱讀全文:]

JS实现鼠标悬浮同时改变多行背景色
文檔創建者:FineReportTW      創建時間:11-07 16:57      標籤:      編輯:6次    |   瀏覽:236次

摘要:1. 概述1.1 预期效果1)报表预览时,希望鼠标悬浮在表格上时,可以实现同时改变多行背景色,即以多行为一组来改变背景色。2)可以自定义是否改变标题行的背景色。以除标题行外每三行改变背景色为例,效果如下[閱讀全文:]

JS实现动态设置每页显示固定行数
文檔創建者:FineReportTW      創建時間:03-02 14:13      標籤:      編輯:13次    |   瀏覽:250次

摘要:1. 概述1.1 问题描述在实际项目中,要求每页显示固定的行数,在工具栏实现翻页,鼠标滑动时单元格所在行变色,效果如下图所示:1.2 解决思路使用 JavaScript 来实现每页显示固定的行[閱讀全文:]

JS实现报表标题动态滚动效果
文檔創建者:FineReportTW      創建時間:04-04 22:12      標籤:      編輯:7次    |   瀏覽:184次

摘要:1. 概述1.1 预期效果有时报表页面显示内容较多时,为了能突出提示某些内容,我们需要一些特殊效果,比如需要实现浏览器标题栏动态滚动效果。如下图所示:1.2 实现思路利用 JS 中 document.t[閱讀全文:]

JS实现双击对话框标题栏最大化
文檔創建者:FineReportTW      創建時間:09-23 10:15      標籤:      編輯:6次    |   瀏覽:287次

摘要:1. 概述1.1 预期效果报表中添加超链接,点击超链接弹出一个对话框,对话框大小固定,没有最大化功能。那如何实现最大化功能呢,如双击对话框标题栏,对话框实现最大化;最大化情况下,双击标题栏返回默认大小。[閱讀全文:]

JS 实现单元格提示内容换行显示
文檔創建者:FineReportTW      創建時間:02-27 12:24      標籤:      編輯:3次    |   瀏覽:317次

摘要:1. 概述1.1 问题描述使用自带的单元格内容提示,无法实现提示内容换行显示,如下图所示:有时需要实现提示内容换行显示,如下图所示:1.2 实现思路使用 JS 的 title 属性实现。2. 示例2.1[閱讀全文:]

JS实现分页预览改变鼠标悬停所在的行列的背景色
文檔創建者:FineReportTW      創建時間:10-04 20:14      標籤:      編輯:19次    |   瀏覽:230次

摘要:1. 概述1.1 预期效果鼠标滑过及悬停时改变行的颜色,使用contentPane.makeHighlight('red','mouseover')方法在某些情况下并不能[閱讀全文:]

JS实现大屏数字增长效果
文檔創建者:FineReportTW      創建時間:07-22 20:05      標籤:      編輯:15次    |   瀏覽:428次

摘要:1. 概述1.1 预期效果扩展图表插件 的仪表盘类图表可以实现数字增长效果,但是如果不使用该插件,希望单元格中的数字可以实现自动增长然后停下来的特效,那么该如何实现呢?效果下图所示:注:这里的自动增长特[閱讀全文:]

JS实现起始日期编辑后结束日期增加7天
文檔創建者:FineReportTW      創建時間:11-17 17:05      標籤:      編輯:24次    |   瀏覽:214次

摘要:1. 概述1.1 应用场景有两个日期控件分别为起始日期和结束日期,要查询一个星期的数据,实现选择起始日期之后,结束日期自动赋值为起始日期后7天的日期。实际效果如下图所示:1.2 实现思路给起始日期添加编[閱讀全文:]

JS实现分页预览改变鼠标所在行的行高
文檔創建者:FineReportTW      創建時間:11-17 17:05      標籤:      編輯:18次    |   瀏覽:204次

摘要:1. 概述1.1 应用场景在实际项目中,希望当鼠标移动到单元格上时能够突出显示该行,本文介绍的突出显示该行的方式是增加行高,当鼠标移开时恢复行高。实际效果如下图所示:1.2 实现思路给当前行增加 加载结[閱讀全文:]

JS实现点击按钮实现全屏预览
文檔創建者:FineReportTW      創建時間:02-23 22:43      標籤:      編輯:17次    |   瀏覽:301次

摘要:1. 概述1.1 问题描述决策平台中预览报表提供了全屏显示功能,但如果不通过决策平台预览,如何全屏预览单张报表呢?注:本文实现的是普通报表点击按钮全屏显示的实现方法,决策报表中点击按钮实现全屏的方法参见[閱讀全文:]

JS实现报表冻结标题居中显示无黑框
文檔創建者:FineReportTW      創建時間:05-11 16:18      標籤:      編輯:10次    |   瀏覽:242次

摘要:1. 概述1.1 问题描述普通报表中,如果报表显示位置为居中,且报表中存在冻结,则预览模板时存在黑色边框,如下图所示:1.2 解决思路添加加载结束事件,通过 JavaScript 代码实现隐藏黑色边框。[閱讀全文:]