jQuery表格头和列固定插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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-tableclass类。

<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'	表格背景颜色。