ITPub博客

首页 > 应用开发 > IT综合 > 移动端报表JS开发示例

移动端报表JS开发示例

原创 IT综合 作者:杰华园 时间:2016-04-07 11:44:00 0 删除 编辑

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

研究的工具是比较有代表性的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博客 ” ,链接:https://blog.itpub.net/21472864/viewspace-2076703/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2015-03-03

  • 博文量
    584
  • 访问量
    815018