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

1. 概述
1.1 问题描述

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

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

修改之前的效果：

修改之后的效果：

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 属性>填报页面设置，选择为该模板单独设置，添加加载结束事件，如下图所示：

JavaScript 代码如下：

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

复制代码

2.3 效果预览

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

注：不支持移动端。

3. 模板下载

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

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

在决策报表中能和修改背景色一起用嘛