反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

自定义插入删除列按钮

  • 文档创建者:快去学习别玩了
  • 历史版本:11
  • 最近更新:星踪 于 2021-05-21
  • 1. 概述

    1.1 问题描述

    默认的插入删除行按钮类型只有插入行和删除行 2 个选项。

    Snag_250bbc0f.png

    那么怎么实现下图所示插入和删除列的效果呢?

    370A2642-AFDA-4070-BE58-5B8FC2DC89D5.GIF

    1.2 实现思路

    插入删除行按钮是根据父子格关系来识别需要插入和删除的数据的。所以按钮类型仍然使用插入行和删除行,通过设置父子格来实现插入删除列的需求。

    注:插入删除列不支持字段纵向扩展的场景。


    2. 示例

    2.1 设计填报模板

    1)新建数据库查询数据集 ds1,SQL 语句为:SELECT * FROM Sales

    1597915455467447.png

    2)设计填报表格,B3~B8 单元格添加文本控件,且单元格都设置为横向扩展,将数据集字段拖入对应单元格,如下图所示:

    Snag_252087ba.png

    2.2 设置插入列按钮

    选中 B2 单元格,给单元格添加一个按钮控件,按钮类型下拉选择插入行,按钮名字修改为插入列,指定单元格设置为B3,其余默认设置即可,如下图所示:

    1597915933961941.png

    2.3 设置删除列按钮

    选中 B1 单元格,给单元格添加一个按钮控件,按钮类型下拉选择删除行,按钮名字修改为删除列,指定单元格设置为B3,其余默认设置即可,如下图所示:

    1597916220174941.png

    2.4 设置父子格

    1)选中 B3 单元格,设置其上父格为无,如下图所示:

    Snag_252cb373.png

    2)B1 和 B2 单元格上父格都设置为 B3 单元格,如下图所示:

    Snag_25315bb6.png

    2.5 效果预览

    1)PC 端

    保存报表,点击填报预览,效果如下图所示:

    370A2642-AFDA-4070-BE58-5B8FC2DC89D5.GIF

    2)移动端

    同时支持 App 端和 H5 端预览,效果如下图所示:

    36614798453762914.jpg


    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\自定义插入删除列按钮.cpt

    点击下载模板:自定义插入删除列按钮.cpt

    附件列表


    主题: 填报应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526