首页 > 其他分享 >同时冻结前后列单元格,中间部分可以滚动

同时冻结前后列单元格,中间部分可以滚动

时间:2022-08-21 16:00:08浏览次数:50  
标签:冻结 滚动 表格 头列 单元格 尾列 0px

关于冻结,目前帆软FR仅支持一段区间的冻结,并不支持多段冻结。而有时我们的业务需求可能是希望能够实现表格的头列和尾列进行冻结,中间的数据格可以滚动。

针对上述问题,现提供一种实现方式,其主要思路如下:

分析表格结构,通过调整CSS手动将对应的单元格进行冻结

首先在根据问题,我们可以直到我们需要将表格的每一行最后一个单元格进行冻结。

而JQ选择器,选中每行最后一个单元格的表达式如下:

$("tr td:last-child")

所以我们可以在web属性的加载结束事件中针对这些被选中的单元格进行样式调整,即冻结。

相关代码如下:

$("tr td:last-child").css({"position":"sticky","right":"0px"});

上述代码中,"position":"sticky"表示将单元格设置为粘性定位元素,"right":"0px"表示该元素在距离屏幕右侧0px的位置悬浮,由此达到了最后一列元素冻结在最右侧的功能。

表格的前列冻结可以使用FR自带的冻结功能,自此便实现了表格的头列和尾列同时冻结的功能。

最终达成效果如下图:

该实现方式可能存在的问题:

  1. 自定义冻结的列不容易确定位置,实际业务中要根据具体的场景进行位置的动态配置。

  2. 在无法确定表格中间部分的单元格的长度时,比较难以确定尾列的冻结位置。所以,推荐尾列使用FR实现,头列使用自定义,因为头列的位置比较固定。

  3. 遇到合并的单元格时JQ的选择器将会很复杂。

标签:冻结,滚动,表格,头列,单元格,尾列,0px
From: https://www.cnblogs.com/weibw162/p/16610142.html

相关文章

  • HTML之marquee(文字滚动)详解
    https://www.cnblogs.com/smiler/p/4892918.html语法:<marquee></marquee>以下是一个最简单的例子:代码如下:<marquee><fontsize=+3color=red>Hello,World</font><......
  • 刷新页面不记住滚动位置
    在浏览器的默认行为中,会默认记住滚动位置,刷新后会回到之前的滚动位置,在一些场景中,会希望每次刷新都回到页面的最顶端。下面介绍下实现的方法。history.scrollRestorationA......
  • 为什么 Mac 上的外接的蓝牙鼠标滚动方向是反向的 All In One
    为什么Mac上的外接的蓝牙鼠标滚动方向是反向的AllInOne设置鼠标滚动方向与触控板滚动方向Mac上的鼠标滚动方向是反向的https://youtu.be/s6xgivLG59Q?t......
  • K8S服务滚动升级
    对于Kubernetes集群来说,一个service可能有多个pod,滚动升级(Rollingupdate)就是指每次更新部分Pod,而不是在同一时刻将该Service下面的所有Podshutdown,然后去更新(例如rep......
  • CSS实现div里面的内容超滚动
    html代码:<divclass="box"><divclass="content"></div><divclass="content"></div><divclass="content"></div><divclass="content"></div><divclas......
  • 模拟浏览器滚动条持续向下滚动
    文件目录结构D:.chromedriver.exe浏览器向下滑动.py代码fromseleniumimportwebdriverimporttimeimportrandomdefroll_window_to_bottom(browser,......
  • 当使用cube-ui的scroll组件进行scrollTo()滚动的时候,iphone手机上失效的解决办法
    在使用cube-ui的scrollTo()进行页面的滚动时,安卓和浏览器都是正常的,但是在iphone的手机上不能滚动经过排查发现是cube-ui的版本问题,当使用1.12.47版本的时候会出现这个问题......
  • CSS的动画滚动效果
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • bootstrap table表内容滚动时表头固定
    问题描述:当表格行比较多时,向下滚动查看下方行内容,标题会跟随页面滚动到上面,这样查看下面的内容时某个字段时的含义就还得翻上去查看; 解决方法:将表头thead设置position:s......
  • PHPExcel导出设置单元格格式
    找到相关文件PhpSpreadsheet/Style/NumberFormat.php  使用$spreadsheet->getActiveSheet()->getStyle('A')->getNumberFormat()->setFormatCode('@');//将A设置成......