JS实现鼠标悬停列标题有超链时标题高亮显示

  • 文档创建者:cherishdqy
  • 编辑次数:5次
  • 最近更新:cherishdqy 于 2020-10-20
  • 1. 问题描述

    当鼠标移动到可排序的列(列标题使用超级链接实现的排序)时,如何实现列标题高亮显示?如下图,当鼠标悬停到列标题有超链接的列时,列标题高亮显示。

    222


    2. 示例

    参考 横向扩展列多列排序 做好点击列标题排序的报表。
    222

    点击菜单模板>模板 Web 属性>分页预览设置,选择“为该模板单独设置”,添加一个“加载结束”事件。

    222

    编辑加载结束事件,添加下面的 JavaScript 代码:

    $("td").mouseover(function() { //鼠标悬浮在单元格上事件
    var id = $(this).attr("id"); //获取鼠标当前所在单元格的id
    var num = id.search("-"); //获取id中“-”符号第一次出现的索引
    var id1 = id.substr(0, num).replace(/[^a-z]+/ig, ""); //截取id值中的字母即列号
    var id2 = id.substr(num, id.length - num); //截取id
    id = id1 + "1" + id2; //设置id为鼠标所在单元格的列表标题的单元格id,1表示列标题所在行
    if ($('td[id^=' + id + ']').attr('class').indexOf('celink') !== -1) //判断列标题是否包含超链接的class
    {
    $('td[id^=' + id + ']').css({
    'background': 'yellow'
    }); //设置列标题单元格的背景色
    }
    });
    $("td").mouseleave(function() { //鼠标离开单元格事件
    var id = $(this).attr("id");
    var num = id.search("-");
    var id1 = id.substr(0, num).replace(/[^a-z]+/ig, "");
    var id2 = id.substr(num, id.length - num);
    id = id1 + "1" + id2; //设置id为鼠标所在单元格的列表标题的单元格id,1表示列标题所在行
    $('td[id^=' + id + ']').css({
    'background': '#e7ebf1'
    }); //设置列标题单元格的背景色为原来的背景色
    });

    代码中 id=id1+"1"+id2;中的 1 为预览效果中标题所在的行。此方法仅适用于列标题为同一行的,像多列排序中的带超级链接列标题不在同一行不适用此方法。

    保存模板,点击分页预览即可查看上面的效果。

    3. 模板下载

    附件列表


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