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

目录:

1. 描述

默认填报报表页面中，鼠标经过填报控件和点击时，会有一个边框，这个边框颜色是固定的，但是有些情况下，和报表本身颜色有冲突，而且选中的黑色也不是很美观，在一些报表中需要修改这两种边框的颜色。

改之前效果：

2. 思路

填报页面中鼠标经过控件的边框对应的对象是_g().curLGP.$fD，点击控件的边框对象是contentPane.curLGP.$glance，所以必须分别修改这两个对象上、下、左、右四个边框线的CSS样式。

3. 操作步骤

这里修改经过控件的边框颜色为蓝色（#0000ff）,点击选中后边框颜色为红色（#ff0000）。

1）打开模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\Form\LineForm\LineForm5.cpt

2）点击菜单模板>模板web属性>填报页面设置，添加加载结束事件，如下图：

//鼠标点击选中单元格时的边框 _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');//经过边框下方线颜色

4. 预览效果

4.1 PC端预览效果

保存模板，选择填报预览，即可看到下图所示效果。

4.2 移动端预览效果

注：不支持移动端。

5. 已完成模板

模板效果在线查看请点击：CSS修改填报页面中鼠标经过或点击单元格边框颜色.cpt
已完成的模板，可参见：%FR_HOME%\WebReport\WEB-INF\reportlets\doc\JS\CSS样式\04-CSS修改填报页面中鼠标经过或点击单元格边框颜色.cpt
点击下载模板


附件列表


主题：
标签： 已验证 9.0验证

文档内容仅供参考，如果你需要获取更多帮助，付费/准付费客户请咨询帆软技术支持
关于技术问题，您还可以前往帆软社区，点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题，可以联系帆软传说哥（qq：1745114201）