移动端报表JS开发示例 报表移动开发javascriptHTML5
最近对移动端的报表开发颇有研究,细磨精算了好久,虽然到现在还是“囊中羞涩”,但决定还是先抛砖引玉,拿点小干货出来和大家分享。
研究的工具是比较有代表性的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 简易版滚动条实例(适用于移动端H5开发)
-
关于Finereport移动端报表二次开发的两个小例子
-
【盘点】2015年最值得关注的8款用户界面新品 用户界面图表报表移动开发UI界面
-
WebUI Studio更名并发布新版Premier Studio 2013 新增移动开发工具集 Intersoft公司.NET用户界面Premier Studio2013移动开发报表设计
-
移动端报表JS开发示例 报表移动开发javascriptHTML5
-
【jeecg移动开发能力】Jeecg 重磅来袭,强大移动报表配置能力,一次配置七种展现风格
-
【jeecg移动开发能力】Jeecg 重磅来袭,强大移动报表配置能力,一次配置七种展现风格
-
js 简易版滚动条实例(适用于移动端H5开发)
-
PHP开发技巧(六)-判断是不是移动端访问的示例代码
-
PHP开发技巧(六)-判断是不是移动端访问的示例代码