反馈已提交

网络繁忙

JS实现鼠标悬浮同时改变多行背景色

  • 文档创建者:s877019087
  • 历史版本:8
  • 最近更新:RosieY 于 2023-12-01
  • 1. 概述

    1.1 预期效果

    1)报表预览时,希望鼠标悬浮在表格上时,可以实现同时改变多行背景色,即以多行为一组来改变背景色。

    2)可以自定义是否改变标题行的背景色。

    以除标题行外每三行改变背景色为例,效果如下图所示:

    20B6A22D-AEDA-4BAF-AE8E-50453F9CDAEC.GIF

    1.2 实现思路

    在分页预览设置界面添加 JS 加载结束事件,定义两个参数title_countrow_count,前者为不变色的标题行数,后者为每几行变色。

    2. 示例

    2.1 准备模板

    打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式报表.cpt

    2.2 添加 JS 事件

    1)如下图给打开的行式报表添加一个「分页预览>加载结束」事件。

    Snag_5a810b6.png

    2)事件设置界面需要添加两个值为整型的参数title_countrow_count

    title_count:用于定义标题行不变色,设置为 n,则报表预览时鼠标悬浮在前 n 行,前 n 行不会变色。

    row_count:用于定义每几行变色,设置为 n,则除标题行外,每 n 行同时变色。

    Snag_5a9e5c4.png

    JavaScript 代码如下:

    setTimeout(function() {
    var move_color='#f0e229';//鼠标悬浮的颜色
    var out_color='#FFFFFF';//鼠标离开的颜色
    // .x-table td 为 cpt 模板格式
    $(".x-table td").mousemove(function() {  
    //alert('212');
        var titlecount = title_count;  //标题行
        var rowcount  = row_count;      //变色行数
        var id  = $(this).attr("id");  //单元格id
        var num=id.search("-");         //获取id中“-”符号第一次出现的索引  
        var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的行号  
        var id2=id.substr(num,id.length-num);  //截取id 
        var flag = Math.ceil((id1-titlecount) / rowcount); //判断所指行第几组
    //计算起始行
        var rowstart = (flag-1)*rowcount + 1+titlecount;
    //计算结尾行
        var rowend = flag * rowcount + titlecount;
    //标题行不变色和所指行第几组判定
         if(id1>titlecount){
    for(var i = rowstart;i<=rowend;i++){
    var col1 = "A"+i+id2;
    $('td[id^='+col1+']').parent('tr').find("td").css('background-color',move_color);
    }
    }
    }); 
    //下同上
    $(".x-table td").mouseout(function() {  
        var rowcount  = row_count;
        var titlecount = title_count;
        var id  = $(this).attr("id");  
        var num=id.search("-");  //获取id中“-”符号第一次出现的索引  
        var id1=id.substr(0,num).replace(/[^0-9]+/ig,"");  //截取id值中的行号  
        var id2=id.substr(num,id.length-num);  //截取id 
        var b = "A";
        //  alert(b);
        var flag = Math.ceil((id1-titlecount) / rowcount);
    //计算起始行
        var rowstart = (flag-1)*rowcount + 1 + titlecount;
    //计算结尾行
        var rowend = flag * rowcount + titlecount;
    if(id1>titlecount){
    for(var i = rowstart;i<=rowend;i++){
    var col1 = "A"+i+id2;
    $('td[id^='+col1+']').parent('tr').find("td").css('background-color',out_color);
    }
    }
    }); 
    }, 100);

    注:想要实现效果要确保此报表 A 列的所有单元格不与其他单元格有合并操作,可以空出 A 列并设置条件隐藏列宽。

    2.3 效果预览

    保存报表,点击「分页预览」,效果如 1.1 节所示。

    注:不支持移动端

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\JS实现鼠标悬浮同时改变多行背景色.cpt

    点击下载模板:JS实现鼠标悬浮同时改变多行背景色.cpt

    附件列表


    主题: 报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    中文(简体)

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭

    联系我们
    在线支持
    获取专业技术支持,快速帮助您解决问题
    工作日9:00-12:00,13:30-17:30在线
    页面反馈
    针对当前网页的建议、问题反馈
    售前咨询
    采购需求/获取报价/预约演示
    或拨打: 400-811-8890 转1
    qr
    热线电话
    咨询/故障救援热线:400-811-8890转2
    总裁办24H投诉:17312781526
    提交页面反馈
    仅适用于当前网页的意见收集,帆软产品问题请在 问答板块提问前往服务平台 获取技术支持