移动端报表JS开发示例

简介:

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

研究的工具是比较有代表性的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个参数,单元格,空和值                  √

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           /                                                                                    √

FR.ajax         异步请求函数                                        /                                                                                    √

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

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


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


获取控件的一系列方法

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

 

填报成功后刷新当前页

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

 

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

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

 

延时函数

1
setTimeout( function () {  }, 500);

 

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

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

 

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



本文转自 雄霸天下啦 51CTO博客,原文链接:http://blog.51cto.com/10549520/1761256,如需转载请自行联系原作者
相关文章
|
29天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
29天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
19 4
|
29天前
|
缓存 JavaScript 数据安全/隐私保护
js开发:请解释什么是ES6的Proxy,以及它的用途。
`ES6`的`Proxy`对象用于创建一个代理,能拦截并自定义目标对象的访问和操作,应用于数据绑定、访问控制、函数调用的拦截与修改以及异步操作处理。
17 3
|
7天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
29天前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8的JavaScript运行时,用于服务器端编程。它的事件驱动、非阻塞I/O模型使其在高并发实时应用中表现出色,如Web服务器、实时聊天、API服务、微服务、工具和跨平台桌面应用(使用Electron)。适用于高性能和实时需求场景。
18 4
|
29天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为向后兼容版本,确保在旧环境运行。它在前端构建中不可或缺,提供语法转换、插件机制、灵活配置及丰富的生态系统,支持代码兼容性和自定义编译任务。**
17 6
|
29天前
|
JavaScript 前端开发
js开发:请解释什么是ES6的async/await,以及它如何解决回调地狱问题。
ES6的`async/await`是基于Promise的异步编程工具,能以同步风格编写异步代码,提高代码可读性。它缓解了回调地狱问题,通过将异步操作封装为Promise,避免回调嵌套。错误处理更直观,类似同步的try...catch。
|
29天前
|
JavaScript
js开发:请解释什么是ES6的Generator函数,以及它的用途。
ES6的Generator函数是暂停恢复的特殊函数,用yield返回多个值,适用于异步编程和流处理,解决了回调地狱问题。
16 6
|
29天前
|
存储 JavaScript 索引
js开发:请解释什么是ES6的Map和Set,以及它们与普通对象和数组的区别。
ES6引入了Map和Set数据结构。Map的键可为任意类型,有序且支持get、set、has、delete操作;Set存储唯一值,提供add、delete、has方法。两者皆可迭代。示例展示了Map和Set的基本用法,如添加、查询、删除元素。
15 2
|
29天前
|
JavaScript
js开发:请解释什么是ES6的Symbol,以及它的用途。
ES6的Symbol数据类型创建唯一值,常用于对象属性键(防冲突)和私有属性。示例展示了如何创建及使用Symbol:即使描述相同,两个Symbol也不等;作为对象属性如`obj[symbol1] = 'value1'`;也可作枚举值,如`Color.RED = Symbol('red')`。