欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > jquery库 > 表格 > jQuery表格头和列固定插件

jQuery表格头和列固定插件

jQuery表格头和列固定插件

关键词:表格,jquery表格头固定插件,jquery表格头固定,jquery表格插件,jquery表格头冻结,jquery表格,jquery库,biaoge

描述:RWD Table是一款jQuery表格头和列固定插件。该jquery插件可以在页面滚动时冻结表格头,或在横向拖动滚动条时,冻结某一表格列。

简要教程

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

该jQuery表格头和列固定插件的github网址为:https://github.com/yidas/jquery-freeze-table

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/jquery_biaoge/9614.html

 在线演示  免费下载
编号:201903070000009614
大小:0.07MB
上传时间:2019-03-15 07:07
素材由用户"flybiao123"上传分享。

标签

最新推荐素材

与jQuery表格头和列固定插件相关的素材

.