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

在线预览    源码下载