RWD Table是一款jQuery表格头和列固定插件。该jquery插件可以在页面滚动时冻结表格头,或在横向拖动滚动条时,冻结某一表格列。
安装
可以通过bower来安装RWD Table插件。
bower install jquery-freeze-table
使用方法
在页面中引入freeze-table.js文件。
<script src="path/to/freeze-table.js"></script>
HTML结构
在表格上添加.table
class类,并且用一个<div>
元素包裹表格,并未它添加.freeze-table
class类。
<div class="freeze-table"> <table class="table"> <thead> <th>...</th> </thead> <tbody> <td>...</td> <tbody> </table> </div>
初始化插件
在页面DOM元素加载完毕,通过freezeTable()
来初始化该插件。
$(function() { $('.freeze-table').freezeTable({}); });
配置参数
参数 | 类型 | 默认值 | 描述 |
freezeHead | boolean | true | 是否允许<thead> 元素在滚动时固定。 |
freezeColumn | boolean | true | 是否允许表格列在滚动时固定。 |
freezeColumnHead | boolean | true | 是否允许表格列(头)在滚动时固定。 |
scrollBar | boolean | false | 是否在X轴上固定滚动条。 |
fixedNavbar | string | '.navbar-fixed-top' | Fixed navbar deviation consideration. Example: '#navbar' |
namespace | string | 'freeze-table' | 表格的命名空间。 |
columnNum | integer | 1 | 冻结列的数量。 |
columnBorderWidth | integer | 1 | 冻结列的附加边框宽度。 |
columnWrapStyles | object | null | 自定义冻结列的样式。 |
headWrapStyles | object | null | 自定义冻结表格头的样式。 |
columnHeadWrapStyles | object | null | 自定义冻结表格头的样式。 |
callback | function | null | 回调函数 |
shadow | boolean | false | 是否允许使用box-shadow |
backgroundColor | string | 'white' | 表格背景颜色。 |
该jQuery表格头和列固定插件的github网址为:https://github.com/yidas/jquery-freeze-table
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!