反馈已提交

网络繁忙

JS实现决策报表中点击标题排序

  • 文档创建者:xi041004
  • 历史版本:31
  • 最近更新:Carly 于 2023-06-07
  • 1. 概述

    1.1 问题描述

    点击某一列标题改变排序多列动态排序 文档中实现了报表动态排序,即根据参数值的不同来决定报表按某列升序还是降序排列,我们也可以利用 JS 来实现此效果。如下图所示:

    222

    1.2 实现思路

    给单元格添加超链接,超链接中 JS 动态改变参数值,报表数据列根据参数值实现升序或降序排列。

    2. 示例一:单列排序

    2.1 准备模板

    1)新建决策报表,新建数据集ds1,SQL语句为:SELECT * FROM 订单 limit 15

    2)在 body 中拖入一个报表块,新建决策报表并拖入报表块,编辑报表块,将订单 ID 字段拖入报表块 A3 单元格,A1单元格输入公式 $a,设置报表样式如下图所示:

    222

    2.2 添加超链接

    右击报表块 A2 单元格,为其添加一个「超级链接」,链接类型选择「JavaScript脚本」,其中需要添加一个参数 a,值为公式:if($a = 1, 0, 1)。如下图所示:

    Snag_57790a2.png

    JavaScript 代码如下:

    //获取report0报表块
    var re = _g().getWidgetByName("report0");
    //获取参数值后加载报表
    re.gotoPage(1, {a:a}, true);  //true 表示刷新时重新计算所有报表块,这可能对报表加载速度有影响。可以改用"lazy",只重新计算单个报表块

    2.3 设置排序

    双击 A3 单元格,选择「高级」,在排序顺序处选择「升序」,公式值为if($a==1,$$$,-$$$),如下图所示:

    image.png

    2.4 效果预览

    2.4.1 PC端

    保存模板,点击「PC端预览」,预览效果如下图所示:

    222

    2.4.2 移动端

    App 及Html5 效果如下图所示:

    222

    3. 示例二:多列排序

    3.1 准备模板

    1)新建决策报表,新建数据集ds1,SQL 语句为:SELECT EMPID,EMPNAME,BIRTHDATE,HEIGHT FROM EMPLOYEE limit 10

    2)在 body 中拖入一个报表块,新建决策报表并拖入报表块,编辑报表块,如下图所示设置报表样式。

    222

    3.2 添加超链接

    1)右击报表块 A2 单元格,为其添加一个「超级链接」,链接类型选择「JavaScript脚本」,其中需要添加参数 a、flag。如下图所示:

    参数 a 的值为 if($a = 1, 0, 1),参数 flag 的值为1 。

    Snag_577f661.png

    JavaScript 代码如下:

    //获取report0报表块
    var re = _g().getWidgetByName("report0");
    //获取参数值后加载报表
    re.gotoPage(1, {a:a ,flag:flag}, true); //true 表示刷新时重新计算所有报表块,这可能对报表加载速度有影响。可以改用"lazy",只重新计算单个报表块

    如果遇到只有第一次点击可以生效的超链,可能是参数 a 只能获取到第一次,此时需要修改参数 a 的赋值方式。如下图所示:

    Snag_5783e67.png

    JavaScript 代码需改为:

    var re = _g().getWidgetByName("report0");
    var a = "${a}";
    a = a == "1" ? 0 : 1;
    re.gotoPage(1, {a:a ,flag:flag}, true);  //true 表示刷新时重新计算所有报表块,这可能对报表加载速度有影响。可以改用"lazy",只重新计算单个报表块

    2)同样的方法,给 D2 单元格添加「超级链接-JavaScript脚本」,其中有两个参数 b、flag,如下图所示:

    Snag_57875a3.png

    JavaScript 代码如下:

    //获取report0报表块
    var re = _g().getWidgetByName("report0");
    //获取参数值后加载报表
    re.gotoPage(1, {b:b,flag:flag }, true);  //true 表示刷新时重新计算所有报表块,这可能对报表加载速度有影响。可以改用,只重新计算单个报表块

    注:给 ID 和身高分别设置 JS 给报表块 report0 传参,在这里用 a,b 和 flag 参数值来区分点击的是哪一个标题,点击的次数。

    3.3 设置排序

    选择 A3 单元格,在扩展后排序处选择「升序」,公式值为if($flag = 1, if($a = 1, A3, -A3), if($b = 1, D3, -D3)),如下图所示:

    注:通过 if 语句,对 flag 值进行判断,然后再对 a,b,c 的参数值进行判断实现对应按照哪个单元格数据进行排序。

    image.png

    3.4 设置公式

    若超链的 A3 单元格是字符串类型的数字,如果要排序需要把它转换成数字类型的,双击 A3 单元格,点击「高级」,在自定义显示中,将值改为公式:TOINTEGER($$$)。如下图所示:

    image.png

    如果需要排序的是日期类型的数据,用 tointeger(format(I2, "yyyyMMddHHmmss") 把它转换成数字类型的进行排序。

    3.5 效果预览

    3.5.1 PC端

    保存模板,点击「PC端预览」,效果如下图所示:

    222

    3.5.2 移动端

    App 及Html5 效果如下图所示:

    222

    4. 模板下载

    示例一:单列排序

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\11-JS实现决策报表中点击标题排序-示例一.frm

    点击下载模板:11-JS实现决策报表中点击标题排序-示例一.frm

    示例二:多列排序

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\11-JS实现决策报表中点击标题排序-示例二.frm

    点击下载模板:11-JS实现决策报表中点击标题排序-示例二.frm

    附件列表


    主题: 决策报表应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭



    AI

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持