table-scroll是一款可以将普通的HTML表格制作为表格头和表格行固定，通过水平和垂直滚动条来查看表格数据的滚动表格，它对于要在同一个页面中显示大数据的表格非常有用。table-scroll表格的特点还有：

  • 可以通过滚动条垂直滚动。
  • 可通过设置左右固定列来设置水平滚动。
  • 支持移动触摸设备。
  • 自动检测垂直滚动区域。
  • 不会对表格元素进行克隆。
  • 可自定义节点类型。

使用方法

使用该表格插件需要在页面中引入jQuery和jqueryui文件，以及table-scroll.min.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/table-scroll.min.js"></script>
初始化插件

该表格使用普通的HTML表格，你可以对表格头和表格脚部进行分隔。在页面DOM元素加载完毕之后，可以通过table_scroll()方法对表格进行初始化。

$('table').table_scroll();

配置参数

table-scroll表格的可用配置参数有：

  • rowsInHeader：表格头的行数，默认为1，如果表格指定的了thead元素，那么该参数不必指定。
  • rowsInFooter：表格脚部的行数，默认为0，如果表格指定的了tfoot元素，那么该参数不必指定。
  • rowsInScrollableArea：在滚动区域可见的行数，默认为10。
  • overflowY：默认为“auto”，可用值有： 'scroll'， 'auto'。
    • scroll：只有在行数大于滚动区域时才出现滚动条。
    • auto：滚动条一直可见，如果行数不大于滚动区域则显示为禁用状态。
  • scrollY：滚动到的行数，默认为0。
  • fixedColumnsLeft：在滚动区域左侧，不随滚动条滚动的列数。默认为0。
  • fixedColumnsRight：在滚动区域右侧，不随滚动条滚动的列数。默认为0。
  • columnsInScrollableArea：滚动区域的列数，默认为5。
  • overflowX：默认为“auto”，可用值有： 'scroll'， 'auto'。
    • scroll：只有在列数大于滚动区域时才出现滚动条。
    • auto：滚动条一直可见，如果列数不大于滚动区域则显示为禁用状态。
  • scrollX：滚动到的列数，默认为0。

table-scroll表格插件的github地址为：https://github.com/volodymyr-bobko/table-scroll