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

关于冻结，目前帆软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
来源： https://www.cnblogs.com/weibw162/p/16610142.html