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

编辑
  • 文档创建者:cherishdqy
  • 浏览次数:3492次
  • 编辑次数:4次
  • 最近更新:Kevin-s 于 2019-06-22
  • 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 为预览效果中标题所在的行。此方法仅适用于列标题为同一行的,像多列排序中的带超级链接列标题不在同一行不适用此方法。

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


    附件列表


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

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

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