CSS修改填报页面中鼠标经过/点击单元格边框颜色

  • 文档创建者:yets11
  • 编辑次数:9次
  • 最近更新:Leo.Tsai 于 2020-06-12
  • 1. 概述

    1.1 问题描述

    前端填报预览时,鼠标经过或点击填报控件,会出现一个边框,这个边框颜色是固定的。

    但是某些场景下,这个边框颜色会跟报表本身颜色有冲突,而且选中控件后黑色边框也不是很美观,在一些报表中需要修改这两种边框的颜色。

    修改之前的效果:

    1568686125488473.gif

    修改之后的效果:

    1568686136553499.gif

    1.2 解决思路

    鼠标经过控件边框的对象:contentPane.curLGP.$glance

    鼠标点击控件边框的对象:_g().curLGP.$fD

    所以必须分别修改这两个对象上、下、左、右四个边框线的 CSS 样式。

    2. 示例

    示例中将经过控件的边框颜色修改为为蓝色(#0000ff),点击选中控件后的边框颜色修改为红色(#ff0000)。

    2.1 准备模板

    打开内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm5.cpt

    2.2 添加事件

    设计器菜单栏点击模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,添加加载结束事件,如下图所示:

    1591926528150053.png

    JavaScript 代码如下:

    //鼠标点击选中单元格时的边框
    _g().curLGP.$fD.fleft.css('background','#ff0000');//选中边框左侧线颜色
    _g().curLGP.$fD.fright.css('background','#ff0000');//选中边框右侧线颜色
    _g().curLGP.$fD.ftop.css('background','#ff0000');//选中边框上方线颜色
    _g().curLGP.$fD.fbottom.css('background','#ff0000');//选中边框下方线颜色
    //鼠标经过单元格时的边框
    _g().curLGP.$glance.left.css('background','#0000ff');//经过边框左方线颜色
    _g().curLGP.$glance.right.css('background','#0000ff');//经过边框右侧线颜色
    _g().curLGP.$glance.top.css('background','#0000ff');//经过边框上方线颜色
    _g().curLGP.$glance.bottom.css('background','#0000ff');//经过边框下方线颜色

    2.3 效果预览

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

    222

    注:不支持移动端。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\04-CSS修改填报页面中鼠标经过或点击单元格边框颜色.cpt

    点击下载模板:04-CSS修改填报页面中鼠标经过或点击单元格边框颜色.cpt

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!