文档章节

移动端报表JS开发技术分享

九月你好123
 九月你好123
发布于 2016/04/07 14:43
字数 1263
阅读 115
收藏 5

最近对移动端的报表开发颇有研究,细磨精算了好久,虽然到现在还是“囊中羞涩”,但决定还是先抛砖引玉,拿点小干货出来和大家分享。

研究的工具是比较有代表性的FineReport。

1、  移动端哪些地方支持调用js

web事件     分页预览 填报预览

加载结束事件           X

填报成功事件 --           √


报表内部js      单元格       图表

超级链接js           √


控件事件 参数控件 填报控件 表单控件

初始化后事件   √           √           X

编辑前           √           √           X

编辑后           √           √           X

编辑结束            √           √           X

点击                    √           √           X

状态改变            √           √           √


2、  报表控件支持的脚本函数

函数名        函数描述           填报控件       参数控件  表单控件

setEnable    设置控件的可用性       √        √             √

isEnable    判断控件是否可用       √        √             √

setVisible    设置控件的可见性       √        √             √

isVisible    判断控件的可见性        √        √             √

setValue    设置控件值                √        √             √

getValue    获取控件的值                √        √             √

setText    设置控件的显示值        √        √             √

getText    获取控件的显示值        √        √             √

reset            重置控件                √        √             √

fireEvent   触发指定名字的事件        √             √


3、  报表分页预览支持的脚本函数

函数名                  函数描述         补充说明                                                      实现

contentPane          当前报表对象     无                                                         

currentPageIndex  当前所在页 contentPane常用属性 只有分页预览报表才有

reportTotalPage 总页数         contentPane常用属性 只有分页预览报表才有

gotoFirstPage         首页                    无                                                                 √

gotoPreviousPage 上一页            无                                                                  √

gotoNextPage         下一页            无                                                                 √

gotoLastPage         末页                    无                                                                 √

gotoPage(n) 跳转到某一页         包含1个参数,表示跳转到第几页                 √


4、  填报预览报表支持的脚本函数

函数名                           函数描述                   补充说明                                                                                      实现

contentPane                 当前报表对象                     无                                                                                √

verifyReport                 数据校验         只有填报表才可以用,contentPane常用方法                                        √

writeReport                 提交报表         只有填报表才可以用,contentPane常用方法                                        √

verifyAndWriteReport  数据校验后提交报表      只有填报表才可以用,contentPane常用方法                        √

curLGP                         current logicpane       contentPane常用属性,只有填报预览及表单预览下才有        √

getCellValue(cell)         获取指定格子的值 包含1个参数,单元格,只有填报下有,curLGP常用方法                √

getCellValue(col, row)         获取指定格子的值 包含2个参数,列和行,只有填报下有,curLGP常用方法        √

setCellValue(cell, null, value) 设置指定格子的值 包含3个参数,单元格,空和值,只有填报下有,curLGP常用方法    √

setCellValue(col, row, value) 设置指定格子的值 包含3个参数,列,行和值,只有填报下有,curLGP常用方法      √

getWidgetByCell                 获取指定单元格中的控件 包含1个参数,单元格,contentPane常用方法              √

getWidgetByName                 获取指定名字的控件 包含1个参数,控件名,contentPane常用方法                       √

getWidgetsByName         获取指定名称的扩展控件  包含1个参数,控件名,contentPane常用方法              √


5、常用的工具类脚本函数

函数名                函数描述                  补充说明                                                                                    实现

FR.Msg.alert    弹出消息框函数      包含3个参数,分别表示:标题,内容,回调函数                  √

FR.Msg.confirm  值确认弹出框函数      包含3个参数,分别表示:标题,值,回调函数                  √

FR.Msg.prompt   可修改值的值确认弹出框函数 包含4个参数,分别表示:标题,说明,值,回调函数

FR.Msg.toast 在页面边缘出现的消息提示块,一小段时间后自动消失 包含1个参数,表示要提示的信息

FR.cjkEncode  进行cjk编码              包含1个参数,字符串                                                        √

FR.cjkDecode  进行cjk解码              包含1个参数,字符串                                                        √

FR.location 地理位置获取              包含一个回掉函数返回获取状态及信息                                √

FR.doHyperlinkByGet /FR.doHyperlinkByPost包含2个参数,分别表示:超链的url, 传递的参数    √

FR.ajax         异步请求函数                                        /                                                         √

_g().parameterCommit() 分页预览及填报预览自动查询 /                                                          

contentPane.setAppearRefresh() 页面再现的时候自动刷新 /                                                  √


以上对应着报表的功能大致罗列了以下框架,下面先举一些小示例

获取控件的一系列方法

this.options.form.getWidgetByName("控件名");  //参数界面及表单中获取控件
contentPane.getWidgetByCell("单元格");  //填报界面获取控件
contentPane.getWidgetByName("控件名");   //填报界面获取控件

 

填报成功后刷新当前页

var url = "/WebReport/ReportServer?reportlet=js/shauxindangqian.cpt&op=write&__replaceview__=true";
FR.doHyperlinkByGet(url,{para:paravalue});  //刷新当前页面

 

js获取表单图表组件并刷新数据

var c=FR.Chart.WebUtils.getChart("chart0");
c.dataRefresh();

 

延时函数

setTimeout(function() {  }, 500);

 

A超链至B填报,B提交数据后返回A时,A自动刷新显示新的数据

contentPane.setAppearRefresh();  //在A的加载结束后事件中添加js

 

以后会陆续分享一些移动端实用功能的应用实例,还有HTML5,欢迎一起探讨。


© 著作权归作者所有

九月你好123
粉丝 10
博文 111
码字总数 112722
作品 0
杭州
私信 提问
关于移动端动态化方案的再思考——Weex

在移动端日益兴起的今天,APP 本身的灵活性、迭代更新的周期、成本优化等动态性问题,成为很多移动应用的客观需求。而针对动态性,开发者们也探索出一些有力的解决方案:Hybrid 方案、结构化...

OSC源创君
2018/07/09
3.2K
16
2016重庆前端交流大会再度起航,评论抢赠票

简介:2016年11月26日,重庆科技馆,前端盛会再度来袭。在前端技术推陈出新、跨界频发的今天,除了奉献一场技术盛宴,还将一起探讨,开发者及初创企业如何能在互联网技术浪潮中稳步前进。 参...

Alaise
2016/11/16
475
7
2016重庆前端交流大会再度起航,评论抢赠票

简介:2016年11月26日,重庆科技馆,前端盛会再度来袭。在前端技术推陈出新、跨界频发的今天,除了奉献一场技术盛宴,还将一起探讨,开发者及初创企业如何能在互联网技术浪潮中稳步前进。 参...

Alaise
2016/11/16
60
0
最火移动端跨平台方案盘点:React Native、weex、Flutter

1、前言 跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头。 为什么我们需要跨平台开发? ...

JackJiang2011
2018/08/13
0
0
关于报表在移动端展现需你需要知道哪些?

现在,企业或者电商平台的商家、业务方,每天都有大量的人需要在线查看大量的指标,用于监控、分析关键业务数据的发展趋势。而且,这些查看分析数据的诉求,对于随时随地、方便快捷的要求也越...

拾光石艺
2018/10/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

python数据结构

1、字符串及其方法(案例来自Python-100-Days) def main(): str1 = 'hello, world!' # 通过len函数计算字符串的长度 print(len(str1)) # 13 # 获得字符串首字母大写的...

huijue
1分钟前
0
0
OSChina 周日乱弹 —— 我,小小编辑,食人族酋长

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @宇辰OSC :分享娃娃的单曲《飘洋过海来看你》: #今日歌曲推荐# 《飘洋过海来看你》- 娃娃 手机党少年们想听歌,请使劲儿戳(这里) @宇辰OSC...

小小编辑
今天
732
10
MongoDB系列-- SpringBoot 中对 MongoDB 的 基本操作

SpringBoot 中对 MongoDB 的 基本操作 Database 库的创建 首先 在MongoDB 操作客户端 Robo 3T 中 创建数据库: 增加用户User: 创建 Collections 集合(类似mysql 中的 表): 后面我们大部分都...

TcWong
今天
40
0
spring cloud

一、从面试题入手 1.1、什么事微服务 1.2、微服务之间如何独立通讯的 1.3、springCloud和Dubbo有哪些区别 1.通信机制:DUbbo基于RPC远程过程调用;微服务cloud基于http restFUL API 1.4、spr...

榴莲黑芝麻糊
今天
26
0
Executor线程池原理与源码解读

线程池为线程生命周期的开销和资源不足问题提供了解决方 案。通过对多个任务重用线程,线程创建的开销被分摊到了多个任务上。 线程实现方式 Thread、Runnable、Callable //实现Runnable接口的...

小强的进阶之路
昨天
79
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部