JS实现决策报表报表块鼠标所在单元格/行的样式

  • 文档创建者:豆豆小可爱
  • 编辑次数:11次
  • 最近更新:Leo.Tsai 于 2020-07-15
  • 1. 概述

    1.1 问题描述

    在设计决策报表时,可能会遇到这样的需求:当鼠标滑过报表块单元格时,添加不同的显示效果。

    但由于决策报表的特殊性,不能像 普通 CPT 报表 通过添加加载结束事件来实现。这时,我们该如何来实现此功能呢?如下图所示:

    1570520282426579.gif

    1570520282266517.gif

    1.2 解决思路

    通过 JS 实现鼠标经过或点击指定行时改变该行的样式。

    注:如果预览模板不生效,将 setTimeout 的延时时间调大点就行,比如将 100 改成 500。

    2. 示例一:改变单元格样式

    2.1 新建模板

    新建决策报表,添加数据库查询,SQL 语句为:SELECT * FROM S产品

    添加报表块 report0 ,样式如下图所示:

    1570520615257926.png

    2.2 添加初始化后事件

    选中 report0 ,点击控件设置,添加初始化后事件,如下图所示:

    1570520919588669.png

    JS 代码如下:


    setTimeout(function() {
    //鼠标经过时
    $(".x-table.REPORT0table td").mousemove(function() {
    //所在单元格字体颜色为红色
    $(this).css("color", "red");
    //所在单元格背景为蓝色
    $(this).css("background-color", "blue");
    //所在单元格字体加粗
    $(this).css("font-weight", "bold");
    //所在单元格添加下划线
    $(this).css("text-decoration", "underline");
    //所在行单元格字体:11px  
    $(this).find("td").css("font-size", "11px");
    });
    //鼠标点击时
    $(".x-table.REPORT0table td").mousedown(function() {
    //所在单元格字体颜色为黄色
    $(this).css("color", "yellow");
    //所在单元格背景为黑色
    $(this).css("background-color", "black");
    //所在单元格字体加粗
    $(this).css("font-weight", "bold");
    //所在单元格添加上划线
    $(this).css("text-decoration", "overline");
    //所在行单元格字体:13px  
    $(this).find("td").css("font-size", "13px");
    });
    //鼠标离开
    $(".x-table.REPORT0table td").mouseout(function() {
    //所在单元格字体颜色为黑色
    $(this).css("color", "black");
    //所在单元格背景为白色
    $(this).css("background-color", "white");
    //所在单元格字体正常
    $(this).css("font-weight", "normal");
    //所在单元格无下划线
    $(this).css("text-decoration", "none");
    //所在行单元格字体:9px  
    $(this).find("td").css("font-size", "9px");
    });
    }, 100);

    2.3 模板预览

    保存模板,预览效果如下图所示:

    1570521049899492.gif

    3. 示例二:改变行样式

    3.1 新建模板

    新建决策报表,添加数据库查询,SQL 语句为:SELECT * FROM S产品

    添加报表块 report1 ,样式如下图所示:

    1570520615257926.png

    3.2 添加初始化后事件

    选中 report1 ,点击控件设置,添加初始化后事件,如下图所示:

    1570521330778325.png

    JS 代码如下:


    setTimeout(function() {
    //鼠标经过时
    $(".x-table.REPORT1table tr").mousemove(function() {
    //单元格所在行字体颜色为红色
    $(this).css("color", "red");
    //单元格所在行背景为蓝色
    $(this).css("background-color", "blue");
    //单元格所在行字体加粗
    $(this).css("font-weight", "bold");
    //单元格所在行添加下划线
    $(this).css("text-decoration", "underline");
    //单元格所在行字体:11px  
    $(this).find("td").css("font-size", "11px");
    });
    //鼠标点击时
    $(".x-table.REPORT1table tr").mousedown(function() {
    //单元格所在行颜色为黄色
    $(this).css("color", "yellow");
    //单元格所在行背景为黑色
    $(this).css("background-color", "black");
    //单元格所在行字体加粗
    $(this).css("font-weight", "bold");
    //单元格所在行添加上划线
    $(this).css("text-decoration", "overline");
    //单元格所在行字体:13px  
    $(this).find("td").css("font-size", "13px");
    });
    //鼠标离开
    $(".x-table.REPORT1table tr").mouseout(function() {
    //单元格所在行字体颜色为黑色
    $(this).css("color", "black");
    //单元格所在行背景为白色
    $(this).css("background-color", "white");
    //单元格所在行字体正常
    $(this).css("font-weight", "normal");
    //单元格所在行无下划线
    $(this).css("text-decoration", "none");
    //单元格所在行字体:9px  
    $(this).find("td").css("font-size", "9px");
    });
    }, 100);

    3.3 模板预览

    保存模板,预览效果如下图所示:

    1570521184679452.gif

    4. 效果预览

    4.1 示例一:改变单元格样式

    1570521451722579.gif

    4.2 示例二:改变行样式

    1570521463657363.gif

    注:不支持移动端

    5. 已完成模板

    已完成模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\02-JS实现决策报表报表块鼠标所在单元格或行的样式.frm

    点击下载模板:02-JS实现决策报表报表块鼠标所在单元格或行的样式.frm

    注:如果预览模板不生效,将 setTimeout 的延时时间调大点就行,比如将 100 改成 500。

    附件列表


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