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

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

获取控件的一系列方法

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