移动端报表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() 页面再现的时候自动刷新 /


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

获取控件的一系列方法

点击(此处)折叠或打开

  1. this.options.form.getWidgetByName("控件名");


点击(此处)折叠或打开

  1. contentPane.getWidgetByCell("单元格");

点击(此处)折叠或打开

  1. contentPane.getWidgetByName("控件名");



填报成功后刷新当前页

点击(此处)折叠或打开

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



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


点击(此处)折叠或打开

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




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


点击(此处)折叠或打开

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


来自 “ ITPUB博客 ” ,链接:http://blog.itpub.net/21472864/viewspace-2076703/,如需转载,请注明出处,否则将追究法律责任。

转载于:http://blog.itpub.net/21472864/viewspace-2076703/

你可能感兴趣的:(移动端报表JS开发示例)