移动端报表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个参数,单元格,空和值,只有填报下有,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,欢迎一起探讨。
移动端报表JS开发示例的更多相关文章
- 移动端报表JS开发示例--获取定位
上次分享了移动端报表JS开发的系统概念,后来我又回去摸索了一些案例.之前接触到的FineReport的APP客户端可以用来打卡签到,就好奇研究了以下,这次就来聊一聊报表移动端开发如何实现定位功能. 1 ...
- 移动端报表JS开发演示样例
近期对移动端的报表开发颇有研究,细磨精算了好久,尽管到如今还是"囊中羞涩",但决定还是先抛砖引玉,拿点小干货出来和大家分享. 研究的工具是比較有代表性的FineReport. 1. ...
- 关于Finereport移动端报表二次开发的两个小例子
例1:刷新页面 1. 问题描述 A超链至B填报,B提交数据后返回A时,A自动刷新显示新的数据. 2. 解决方案 1. contentPane.setAppearRefresh(); //在A的加载结 ...
- 原生js开发,无依赖、轻量级的现代浏览器图片懒加载插件,适合在移动端开发使用
优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...
- SharePoint 2013 APP 开发示例 (六)服务端跨域访问 Web Service (REST API)
上个示例(SharePoint 2013 APP 开发示例 (五)跨域访问 Web Service (REST API))是基于JavaScript,运行在web browser内去访问REST AP ...
- 基于node.js 的 websocket的移动端H5直播开发
这一篇介绍一下基于node.js 的 websocket的移动端H5直播开发, 下载文章底部的源码,我是用vscode打开, 首先在第一个终端运行 npm run http-server 这个指令是运 ...
- Node.js学习笔记——Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- Node.js开发Web后台服务
一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
随机推荐
- ubuntu系统(华硕笔记本)屏幕亮度用Fn控制的调节设置
亲测配置: 系统:Linux lite 3.2 x86_64(Ubuntu其他版本可参考修改) 笔记本:华硕(asus)1201N 达到的效果: 可以正常使用Fn+F5调暗,Fn+F6调亮. 设置步骤 ...
- 【每日一linux命令2】命令执行顺序:
二.命令顺序: 若在 shell 内置的命令/bin 以及/usr/bin 之下都出现了命令 pwd,那当我们执行该命令时,会执行哪 一个?答案是第一优先执行 shell 内置的命令,再执行路 ...
- AutoMapper(五)
返回总目录 Dynamic和ExpandoObject映射 AutoMapper不用任何配置就可以从dynamic(动态)对象映射或映射到dynamic对象. namespace FifthAutoM ...
- Windows平台分布式架构实践 - 负载均衡(下)
概述 我们在上一篇Windows平台分布式架构实践 - 负载均衡中讨论了Windows平台下通过NLB(Network Load Balancer) 来实现网站的负载均衡,并且通过压力测试演示了它的效 ...
- 一个标签的72变,打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
- 玩转 Linux 系统的方法论
Linus 说“Just for fun”,而我要说“Just for 折腾”.想知道我是怎样折腾 Linux 的,请看下面这个截图: 从这个截图可以看出,我为了“折腾” Linux 系统,在我的电脑 ...
- webpack搭建前端一条龙服务
作为从grunt.gulp一路走来的老码农,一开始用webpack的时候我是很抗拒的.但由于核心库使用了vue,而webpack又是vue的最佳拍档(vue作者专门为其写了vue-loader),所以 ...
- [Solr] (源) Solr与MongoDB集成,实时增量索引
一. 概述 大量的数据存储在MongoDB上,需要快速搜索出目标内容,于是搭建Solr服务. 另外一点,用Solr索引数据后,可以把数据用在不同的项目当中,直接向Solr服务发送请求,返回xml.js ...
- 快速Android开发系列网络篇之Android-Async-Http
先来看一下最基本的用法 AsyncHttpClient client = new AsyncHttpClient(); client.get("http://www.google.com&q ...
- C#中,双屏/两屏/三屏/多屏跳转判断
之前伤脑筋写过一次在Web中,JS,ActiveXObject去读取显示器数量.分辨率去判断单双屏跳转. 那么在客户端中,用C#去读取硬件信息,更方便更容易! 思路参考代码: ) { //此显示器是否 ...