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