反馈已提交

网络繁忙

卡片分栏

  • 文档创建者:文档助手1
  • 历史版本:23
  • 最近更新:HeroZ 于 2023-02-01
  • 1. 概述

    1.1 版本

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

    1.2 预期效果

    实际应用中会有如下图的情况:需要将查询出的信息以卡片的形式在页面显示,每个卡片均有大标题和表头,并且各卡片之间有空行或空列进行分割。

    1.3 实现思路

    可以使用分栏设置,实现卡片式的分栏效果。

    2. 操作步骤

    2.1 数据准备

    新建一张模板,新建数据集 ds1:select * from 雇员

    2.2 模板设计

    如下图所示,将数据列拖入相应单元格。

    由于每个员工卡片都包括大标题和表头,各卡片之间均有空行和空列进行分割,并且员工卡片是根据“员工ID”列进行纵向排序扩展的。

    具体单元格设置参见下表:

    单元格
    设置
    A1~C2
    合并 A1~C2 单元格,输入文本:员工信息调查表。设置左父格为 B3 。
    A3~A6A3~A6 分别输入文本:编号:姓名:性别:职务:;设置左父格为 B3 。
    B3~B6

    B3~B6 分别拖入对应的字段信息,B4、B5、B6 设置左父格为 B3 ,并设置扩展方向为纵向扩展。

    其中 B3 单元格的「单元格元素>基本>数据设置」选择「列表」。

    C3~C6合并 C3~C6 单元格,拖入对应字段信息,设置左父格为 B3 ,并设置扩展方向为纵向扩展。
    A7、D1卡片之间有分割行和列,设置分割空白行的首个单元格 A7 和分割空白列的首个单元格 D1 的左父格为 B3。

    注:最左父格的数据设置需要设置为「列表」。

    预览效果如下:每个卡片有完整的信息,并且卡片之间有空白分割行。

    222


    2.3 分栏设置

    上述模板预览效果可以看出该模板是纵向扩展,故分栏选择行分栏。

    上述模板设计中可以看出,每一位员工信息占了 7 行 4 列(包括卡片和下方空白分隔行及右侧空白分割列):第一行是大标题行,第一列是表头列,但由于每条卡片都带有大标题和表头,故可以将大小标题看成是数据的一部分,所以是 7 行 4 列,而不是 6 行 3 列。

    若我们希望每栏显示 4 位员工信息,则需要设置每栏 28 行( 7 行 * 4 卡片= 28 行),超过的到下一栏(卡片是纵向扩展,故下一栏是指下一列)显示,以此类推。

    在菜单栏中,选择「模板>报表分栏」,设置为行分栏,超过 28 行时进行分栏,参与分栏的数据从左上角的 A1 (大标题开始的单元格)到右下角的 D7,故在分栏数据中填写 A1:D7,因为大小标题行已经作为分栏数据,所以重复行序列为空,如下图:

    3. 效果预览

    3.1 PC 端

    保存模板,选择分页预览,实现效果如 1.2 节所示。

    注:只支持分页预览。

    3.2 移动端预览效果

    App 与 HTML5 端效果相同,如下图所示:

    4. 已完成模板

    已完成的模板可参考%FR_HOME%\webroot\WEB-INF\reportlets\doc\Advanced\卡片分栏.cpt

    点击下载模板:卡片分栏.cpt


    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

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

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

    不再提示

    10s后关闭

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