移动端报表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("单元格");  //填报界面获取控件

  view

 

 

 

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,欢迎一起探讨。

你可能感兴趣的:(JavaScript,移动开发,html5,报表)