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