jquery报表,jquery报表插件

怎样使用web报表开发工具FineReport来页面集成

方法/步骤

专业成都网站建设公司，做排名好的好网站，排在同行前面，为您带来客户和效益!成都创新互联公司为您提供成都网站建设，五站合一网站设计制作，服务好的网站设计公司，网站设计、成都网站设计负责任的成都网站制作公司!

1

1. 将报表显示在Frame框架内

1.1 集成方法

报表作为页面的一部分，可以以iFrame方式嵌入在网页中，指定iFrame的src即可。

2

用户可以控制iframe的位置来控制报表在页面的什么地方显示，还能够通过iframe获取到报表，从而获取报表内容或调用报表内部现成的方法，我们在后续章节会进行介绍。

注：此方法iframe的src会显示出完整的报表路径，尤其在有参数的情况下，可以使用post方式向iframe提交请求，这样src里有不会出现具体的参数了。

2.2 示例

我们以HTML为例，将报表嵌入到一个HTML页面中：

3

2.3 效果查看

在浏览器中输入，效果如下：

4

已完成示例请参照%FR_HOME%\WebReport|page_demo\Simple.html

在线查看示例效果请点击Simple.html。

3. 不支持将报表显示在div内

若您希望自己系统页面中的按钮调用FineReport内部现成的js方法如（打印方法），需要加载FineReport的js文件，FR的js采用jquery v1.9.2框架；

实际情况下，一个页面中可能不仅仅只有报表部分，用户可能会加载其他版本的jquery，为避免js冲突，我们建议将报表内容显示在iFrame中，而不要显示在div中。

需要调用FR内部的js方法时，可以通过iFrame获取报表再调用方法，具体可参考js使用说明文档。

使用React制作简易财务报表

1.创建项目

2.cd到该文件夹

3.运行（开发模式）

如果再起一个服务器，可能会出现端口号不会自动排的现象，针对这种情况，可以在package.json中自行设置端口号，如下图

4.模拟数据服务器

4.1  使用GitHub登录，创建一个新项目

4.2点击进入

4.3点击进入

  4.4填写信息

   4.4.1填写路由名称（数据表名）

   4.4.2填写数据表里的内容

   4.4.3生成链接

   4.4.4在浏览器地址栏中输入地址加路由records

4.5访问数据

第一种方法：通过外网进行访问

①浏览器地址栏测试数据访问

   ②终端测试数据访问

   ③浏览器console debug栏测试api接口（get方式）

   第二种方法：将json数据存放在本地服务器进行访问

   1.链接：

   2.全局安装

   3.在fssytem中创建一个json文件格式为{“records”:}，然后将前文通过外 网地址访问到的数据赋值粘贴到：后面

  4.运行服务器

5.在地址栏中输入命令中的http地址（服务器运行中）

4.6App.js中

4.7发送请求获取数据（在项目中使用jQuery和axios优化App.js）之使用 jQuery方式

4.7.1命令安装jquery

4.7.2 App.js中导入jQuery组件

4.7.3使用jQuery发请求

4.7.4使用传统的map遍历(App.js中)

4.7.5records文件中

   4.7.4使用ES6扩展运算符

   4.7.5Records.js

4.8优化部分

   4.8.1需要在record.js优化时间显示

   4.8.2优化jQuery引入app.js

   4.8.3引入显示状态和错误显示状态

4.8.3.1定义isloaded(是否完成加载)，定义error

4.8.3.2重设状态机，分别设置成功时和失败时的状态

   4.8.3.3视情况进行判断，写出对应的显示内容

4.9发送请求获取数据（在项目中使用jQuery和axios优化App.js）之使用 axios方式（与jQuery两种方法任选其一即可）

网址：

4.9.1安装

4.9.2导入

4.9.3使用因为axios会将所获取的数据存在data的集合中，所以需要response.data

   4.9.4引入显示状态和错误显示状态

5.0优化URL请求，目的是使用环境变量来将URL请求地址写灵活，方便统一管理。

方法一 ：src中创建一个utils文件夹，创建一个Config.js文件，配置环境变量

App.js中导入

使用

由于windows系统不支持配置环境变量，解决方式如下:

Package.json中配置（红框之间有空格）

重启服务器

页面显示

方法二：

在根目录下创建一个.env.development.local 文件（与src平级）

在package.json中删除之前配置的东西，恢复原状

重启服务器

继续优化

1.删除原来的后缀

2.App.js中简写

   3.config.js中

   4.App.js

�        5.提取公共变量

功能：增加input框，实现添加，编辑，取消，更新，删除等功能

6.0增加input框

6.1在components文件夹中创建一个名为Input的文件，因为bootstrap按钮和input框相比较大，所以需要另外设置css样式进行引入使用

效果图如下：

6.2实现添加提交功能

1. Input文件中通过设置input的onChange事件来获取输入的值

1.1调用selectedinfo方法

   1.2为了保证所有选框都填写完整才可以提交的情况，这里需要设置一下button的属性，当所有都完整的时候，button才可以点击

1.3点击button进行提交

   1.3.1使用post方式将数据提交到服务器上（在Config.js文件配置post 方法并开放）

   1.3.2在子组件RecordForm中导入上文方法并使用，服务器响应成功后将该值传递给父级App

1.3.3父级App接收到值后进行处理负责显示在界面上

1.3.3.1导入input文件

�        1.3.3.2设置与子级对应的行间属性handleNewRecord

   1.3..3.3设置addRecord方法

6.3实现编辑功能

1.先在增加编辑、删除功能键，并在App.js文件中增加一个操作表头。

   2.当点击编辑的时候，前面的内容状态变为input可修改的状态框

   2.1设置一个中间变量edit,默认状态是false，当点击编辑按钮时，edit为true，对应内容状态为可输入的input框。Edit的状态决定使用哪个模板.

   2.1.1设置edit中间变量

   2.1.2点击编辑按钮调用handleEdit事件（定义点击编辑前的状态模板）

   2.1.3定义handleEdit方法，并重置状态机设置edit状态

   2.1.4定义点击编辑按钮后的状态模板

   2.1.5根据edit的状态来决定使用哪个模板

6.4实现取消功能（直接在取消调用与编辑按钮一样的方法即可）

6.5实现更新功能

1.先提交数据到服务器,传值给父级

   1.1在Config,js文件中配置更新的put方法，为了得到更新的是哪一个数据，还需要传id值

   1.2在Record导入该方法，以便在更新事件中使用

   1.3给更新按钮增加更新事件

   1.4定义该更新事件

修改前

   修改后

Record文件中所有之前格式类似为this.props.data的都改为如下格式：

1.5为了找到当前这个input框的值，需要给input增加一个ref行间属性

2.父级app进行处理显示

2.1设置与子

finereport是生成前端页面吗

不是

jQuery 是一个快速简洁的 JavaScript 库，使用户能方便地处理 HTML 实现交互效果。

FineReport 报表前端采用 jQuery 框架，制作的报表解析后最终成为一个 HTML 文档，即每一份模板在浏览器端预览时都将对应一个 HTML 页面。因此用户可以使用 jQuery 框架的所有方法对报表前端进行二次开发；同时 FineReport 还提供了前端 JS API 供用户开发使用。

本文将介绍在 FineReport 中如何进行前端二次开发，用户了解后就可以通过 JavaScript 或 CSS 来修改报表内容或添加交互特效。

用jquery可以做什么好

使用jQuery可以很方便的实现页面元素的显示和隐藏，因此也比较容易设计出一个美观大方多层次的导航菜单。

Tab内容的切换

网站的内容越来越丰富，于是网站都希望在尽量少的空间内展示尽量多的内容，而又不能显得凌乱不堪，让用户无法寻找。解决的最好办法就是在页面上使用Tab。目前，Tab已经成为Web 2.0网站上的一个流行元素，并且也衍生除了很多优秀的用户使用效果。下面是几个使用jQuery来实现Tab效果的大型网站的实例。

人性化的提示信息

最好的提示信息往往是在用户最开始出错的地方进行提示的信息。如果用户都已经进行了大部分的操作，此时如果提示某项有错，需要用户重新做，试想一下，这种做法很容易把用户激怒，甚至会进而放弃对网站的访问和使用。

可定制的用户内容

Web 2.0网站一个很大的特征就是用户的参与。因此现在很多网站都可以让用户根据自己的需求进行定制，用户可以根据自己的喜好对网页的显示内容甚至显示风格进行选择或者定制。

动态的图片展示效果

Web 2.0网站的另一个显著的特点就是网页不再是千篇一律的静态页面。它出现了很多以前需要使用Flash等工具才能做出来的动态效果。例如，Dell网站上有一个图片切换效果，就是使用Flash来实现的，如图所示。

AJAX实时局部刷新

AJAX可以给用户带来很好的用户体验。用户感到的最直观一个体验就是页面的局部实时刷新。在传统网站上，想要更新页面内容的某一部分，则必须将这个页面重新刷新；使用AJAX之后，用户会看到，只有需要改变的内容才会重新发送数据给服务器，其他部分则保持不变。

jQuery中提供了很强大的AJAX功能。著名的微博客类网站twitter.com就是使用的jQuery中的AJAX技术来实现其信息的发布的。如图所示。

数据的可视化显示

在日常生活中，经常会接触到大量的数据统计信息，如工作报表、消费统计等。最简单的表现这些报表数据的方式就是直接列出一个表格。不过从某种程度上来说，单纯的一堆数字看起来不是那么的直观易读。因此，在Web 2.0时代，人们更愿意使用更加直观的可视化图表的方式对统计数据进行显示。

使用FineReport报表软件自定义菜单

界面操作

1.基于报表运行环境设计报表的理念，实现远程服务器协同设计报表

2.统一报表运行环境与本地目录的文件选择面板

3.统一的基于JControlPane的属性编辑面板

4.BasicPane简单化对话框生成机制

5.报表填报属性面板中提供快捷的方式选择单元格为值

6.docking frame提供快捷的方式编辑报表及单元格的常用属性，如父格设置，扩展方向设置，数据列设置

7.优化工具栏上边框设置的按钮

8.提供用户自定义单元格样式的使用

9.增加简单分组报表与交叉报表的向导

10.简化数据列面板

11.简化父格选择设置面板

12.格式刷

13.支持拖拽方式改变多sheet时sheet间的位置

14.设计器界面日志的提供以及日志输出位置自定义

15.设计器菜单配置文件以自定义菜单项

16.优化单元格填报属性界面

17.优化单元格高亮属性界面

18.增加选择单元格时支持Ctrl多选的功能

19.增加为有特殊属性的单元格设置标记的功能

20.增加Access作为数据连接时的绝对路径JDBC的功能

21.增加设计器关闭时多个模板未保存状态时的界面

22.修正了在设计器中输入过长数字字符如22222222222222222222222222的处理

23.增加繁体版设计器

24.增加了设计器Grid冻结窗格功能

报表功能

1.优化报表运算内核

2.增加数据集函数的支持

3.删除覆盖单元格功能

4.增加单元格的可伸展性属性

5.增加子报表功能

6.增加形态作为单元格打印时的显示值

7.强化单元格条件加亮功能

8.支持javascript形式的超级链接

9.优化Excel导入导出

10.增加导出Excel时的加密功能

11.增加报表填报回滚的支持

12.增加报表填报时的公式支持

13.增加报表填报时的自由SQL支持

14.统一参数的处理方式

15.优化了报表操作数据库的功能

16.增加用户自定义ErrorHandler的支持

17.优化公式运算效率

18.改进了公式计算时不同类型数据相互计算的问题

19.支持单元格自动调整行高

20.增加数组函数

21.优化层次坐标的处理

22.加强层次坐标的功能，支持条件，加强定位功能

23.优化了报表分页功能

24.加强了报表分页功能，支持重复行头行尾，以及重复列头列尾

25.优化报表页眉页脚功能

26.增加参数处理器功能

27.增加以Excel文件作为数据集

28.增加NUMTO，RANGE等函数

29.优化TODATE函数

30.增加数据列的补充空白行功能

31.层次坐标中用!0替换了`0(`0还是兼容的)，要文档

32. 增加页眉页脚支持公式..

Web功能

1.jquery替换Ext，减少了js文件大小，加快js运行效率

2.优化BS公式自动计算

3.优化BS编辑效率

4.减小报表输出成html的大小

5.增加BS下冻结行列的功能

6.增加flash打印功能

7.优化PDF打印功能

8.优化服务器端打印功能

9.简化自定义报表页面的功能

10.优化了用户自定义参数页面的功能

11.修改了浏览报表时长时间不做操作会导致session超时的问题

12.优化cjkEncode彻底解决中文乱码问题

13.增加BS浏览的网页背景的功能

14.优化数据校验的功能

15.优化单元格编辑器之下拉框功能

16.增加单元格编辑器对用户自定义的支持

17.增加单元格以图片形式画在浏览器上的功能

18.增加BS编辑报表时的联动功能

19.增加不分页浏览报表的功能

20.支持配置文件的WEB热部署

21.增加填报的提交同时进行校验功能

图表

1.增加了仪表盘

2.优化了图表编辑对话框，采用类似Excel，分成类型，数据，风格三种对话框

3.图表标题支持公式

4.简化格子数据源界面(其实这个界面不好理解)

5.优化了图表数据源界面

定时器

1.使用quatz的底层调度内核

权限

1.界面进行了优化调整

2.权限控制同时服务于Web浏览与远程设计

3.增加了内置角色、用户和组织

4.加强了角色对模板访问、表单的权限

5.单元格填报支持角色控制