【分页预览JS实例】JS实现鼠标悬停列标题有超链时标题高亮显示

楼主
我是社区第485122位番薯,欢迎点我头像关注我哦~
1. 问题描述

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



2. 示例

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

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


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

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

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

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

3. 模板下载

模板下载见附件



分享扩散:

沙发
发表于 2022-2-18 13:49:52
看着不错,回头试试~
板凳
发表于 2022-2-26 17:16:48
附件在哪里?
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

2回帖数 1关注人数 8474浏览人数
最后回复于:2022-2-26 17:16

返回顶部 返回列表