反馈已提交

网络繁忙

[通用]移动端自定义控件样式

  • 文档创建者:Wendy123456
  • 历史版本:15
  • 最近更新:RosieY 于 2023-07-03
  • 1. 概述

    1.1 版本

    报表服务器版本App 版本HTML5 移动端展现插件
    11.0V11.0V11.0

    1.2 应用场景

    用户遇到下面场景时,需要调整控件样式:

    • 模板中控件高度不一,为了模板美观性,需要控件高度一致。

    • 有些控件不需要设置控件边框,例如单选按钮组控件。

    • 非浅色背景中,控件背景颜色与所处背景不统一。

    • 控件的字体颜色与模板整体效果不符。

    1.3 功能简介

    用户可在控件的「样式模板」中,自定义设置控件的背景颜色、边框线型、边框颜色、控件字号等属性。

    2. 示例一:设置控件样式模板

    2.1 生效范围


    报表类型控件位置功能说明
    决策报表
    参数面板仅支持设置字体大小
    body控件背景、边框线型、控件字体等都支持

    2.2 模板准备

    1)在 FineReport 设计器中点击「模板」>「新建决策报表」。

    2)在决策报表中拖入下拉框控件,选中「下拉框控件」,在「属性」Tab 页中设置数据字典。如下图所示:

    12.png

    2.3 设置控件样式

    选中「下拉框」控件,点击「移动端」>「样式模板」,属性设置选择「自定义」,设置控件属性。如下图所示:

    13.png

    2.4 效果查看

    App 及 HTML5 端预览效果如下图所示:

    6.gif

    3. 示例二:使用 JS 语句更改控件值颜色

    注:修改控件值颜色时,JavaScript 语句优先级大于控件「样式模板」中的设置。

    3.1 模板准备

    1)在 FineReport 设计器中点击「文件」>「新建决策报表」。

    2)在决策报表中拖入一个「文本控件」,控件值为「123」,如下图所示:

    41.png

    3.2 添加初始化后事件

    修改控件值颜色的 JavaScript 代码有 3 种,分别为:

    • this.css("color","red");

    • this.css("color","#00ff00");

    • this.css("color","rgb(0,0,255)");

    选中「文本控件」,点击「事件」添加「初始化后事件」。如下图所示:

    42.png

    JavaScript 代码如下所示:

    this.css('color','#33FF33')

    3.3 效果查看

    App 及 HTML5 端预览效果如下图所示:

    67.jpg


    附件列表


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

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

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

    不再提示

    10s后关闭

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