反馈已提交

网络繁忙

JS实现分组内单元格无边框

  • 文档创建者:axing
  • 历史版本:15
  • 最近更新:HeroZ 于 2023-12-01
  • 1. 概述

    1.1 版本

    报表服务器版本
    功能变更
    11.0-

    1.2 预期效果

    在设计分组报表的时候,希望相同分组内的报表没有边框,不同分组之间有边框,如下图所示(左边是原格式,右边是需求格式):

    2.png

    1.3 实现思路

    利用条件属性或者 JS 来控制组内边框显示与否。

    2. 示例

    2.1 准备模板

    1)新建模板,添加数据集 ds1,SQL 语句为: SELECT 地区,销售员,产品||'(销量)'||销量 as 业绩 FROM 销量 where 地区='华东',如下图所示:

    1543997543u9Rt0JKV.png

    2)将数据拖入对应的单元格中,模板设置如下

    1543997600hPBQpOkT.png

    3)设置边框。选中 C2 单元格,去掉 C2 单元格的上下边框,保留左右边框。如下图所示:

    222

    4)选中 D2 单元格,设置左父格为 B2 ,选择单元格属性,插入公式 :COUNT(C2) + D2[B2:-1],然后隐藏 D 列。其中 COUNT(C2) 计算组内单元格数量,D2[B2:-1] 表示获取上一个 B2 单元格所对应的 D2 的值。公式作用为记录截止到每一组最后一个的单元格数量,如下图所示:

    2.2 设置边框

    2.1 节中已取消了 C2 单元格的上下边框,并且记录了截止每一组最后一个单元格的单元格数量,接下来就需要通过这个数量,加上对应的组边框。即给每一组的第一个单元格加上边框或给每一组最后一个单元格加下边框。可通过两种方式实现:条件属性或添加 JS 代码。

    2.2.1 条件属性

    选择 C2 单元格,点击「条件属性>添加条件>属性>边框>编辑」,只添加下边框,公式条件类型选择公式,公式为:ROW()=D2+1。如下图所示:

    4.png

    2.2.2 JS 方法实现

    若不用条件属性,也可以通过添加 JS 事件实现。

    选择「模板>模板web属性>分页预览设置」,为该模板单独设置,并添加「加载结束」事件,如下图所示:

    JavaScript 代码如下:

    注:此方法不支持移动端。

    //找到 D2 单元格中值对应行,添加下边框,其中[id^=D] 表示选中 D 列单元格
    $("[id^=D]").each(function(){  
        $("#r-"+$(this).text()+"-0").css("border-bottom","1px solid black");  
    })

    2.3 效果预览

    2.3.1 PC 端

    保存模板,点击分页预览,效果如下图所示:

    2.3.2 移动端

    App 及 HTML5 效果如下图所示:

    注:JS 实现方法不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Advanced\GroupReport\分组内单元格无边框.cpt

    点击下载模板:分组内单元格无边框.cpt


    附件列表


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

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

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

    不再提示

    10s后关闭



    AI

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