数据表 - 仅针对某些列的水平滚动答案

【问题标题】：Datatables - horizontal scrolling for only certain columns数据表 - 仅针对某些列的水平滚动
【发布时间】：2018-02-15 05:06:04
【问题描述】：

Datatables 中的 scrollX 选项允许用户水平滚动网格 - 但是，在我的表格中，我需要将前两列保持在原位，但允许接下来的 x 列水平滚动。我没有看到任何关于如何做到这一点的好例子。

示例： https://datatables.net/examples/basic_init/scroll_x.html

【问题讨论】：

标签： javascript datatables

【解决方案1】：

您可以通过根据scrollLeft 值更改每个单元格的相对位置来实现此目的。

$('.dataTables_scrollBody').scroll(function (){
    var cols = 2 // how many columns should be fixed
    var container = $(this)
    var offset = container.scrollLeft()
    container.add(container.prev()).find('tr').each(function (index,row){ // .add(container.prev()) to include the header
        $(row).find('td, th').each(function (index,cell){
            if(index>=cols) return
            $(cell).css({position:'relative',left:offset+'px'})
        })
    })
})

【讨论】：

真棒 - 必须使用静态列的背景颜色（白色单元格是透明的，“隐藏”列的数据显示出来）并在静态列标题上设置 z-index出于同样的原因，但效果很好。
对我来说，为了解决重叠滚动列的问题，为静态列标题和单元格设置背景颜色有效。谢谢！