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










  • 相关阅读:
    leetcode刷题笔记四十四 通配符匹配
    leetcode刷题笔记四十三 字符串相乘
    leetcode刷题笔记四十二 接雨水
    Scala 学习 -- 其他集合类学习
    Scala 学习 -- 列表
    leetcode刷题笔记四十一 缺失的第一个正数
    HTML5每日一练之OL列表的改良
    HTML5边玩边学(1)画布实现方法
    html5 +css3 第一章学习和笔记
    HTML5每日一练之figure新标签的应用
  • 原文地址:https://www.cnblogs.com/liang123/p/6325021.html
Copyright © 2020-2023  润新知