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

编辑
  • 文档创建者:yets11
  • 浏览次数:3515次
  • 编辑次数:7次
  • 最近更新:Kevin-s 于 2019-06-23
  • 1. 描述

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

    改之前效果:

    改之后效果:



    2. 思路

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


    3. 操作步骤

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

    1)打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm5.cpt

    2)点击菜单模板>模板 Web 属性>填报页面设置,添加加载结束事件,如下图:


    JS 代码如下:

    //鼠标点击选中单元格时的边框
    _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%\webapps\webroot\WEB-INF\reportlets\doc\JS\CSS样式\04-CSS修改填报页面中鼠标经过或点击单元格边框颜色.cpt

    点击下载模板


    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

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

    此页面有帮助吗?只是浏览 [ 去社区提问 ]