jQuery锁定表头和固定列插件FixedTable

所属分类:UI-图表

 16107  72  查看评论 (24)
jQuery锁定表头和固定列插件FixedTable ie兼容8

更新时间:2017/9/30 下午11:19:40

更新说明:修复ajax模式在不传递maxHeight参数时两侧固定列高度计算不出来的bug


fixedTable

jQuery插件模式

jQuery插件模式指的是表格的dom结构一加载就已经存在,表格里的数据由后端语言(Java、PHP、node.js等)直接填充!

需要引入的资源:

<link rel="stylesheet" href="css/fixed-table.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="js/fixed-table.js"></script>

fixedTable

$(".fixed-table-box").fixedTable() => $(".fixed-table-box")对象

调用fixedTable()方法后FixedTable才能有效! 查看demo

getRow

$(".fixed-table-box").getRow(row) => 包含多个对象的数组

row {索引、dom对象,jQuery实例}[必填] row参数可以为表格主体行、两侧固定列中的行的数字索引、dom对象,jQuery对象,无论是否能获取到行都会返回一个数组。 返回的数组内容格式如下:查看demo

[
    {
        bodyRow: tr,//表格主体中的行
        leftFixedRow: tr,//左侧固定列的行
        rightFixedRow: tr//右侧固定列的行
    }
]

addRow

$(".fixed-table-box").addRow(rows) => $(".fixed-table-box")对象

rows {html字符串、dom对象、jQuery实例、function}[必填] 如果rows为一个function,则该function必须return html字符串或dom对象或jQuery实例

addRow()方法是为了方便动态的添加一行而添加的一个方法,如果不调用此方法,自己用js添加一行也是可以的。但是如果有两侧的固定列那么就需要做很多事情了,1:除了给表格主体添加行外还需要给两侧的固定列添加相同的行;2:如果表格没有垂直滚动条,并且有两侧固定列,那么你还需要手动去计算两侧固定列的高度

deleteRow

$(".fixed-table-box").deleteRow(rows) => $(".fixed-table-box")对象

rows {html字符串、dom对象、jQuery实例、function}[必填] 如果rows为一个function,则该function必须return html字符串或dom对象或jQuery实例

deleteRow()方法与addRow()方法类似,在删除了表格主体中指定的行后,如果有固定列,则会同时删除固定列中对应的行,并且计算固定列的高度 查看demo

emptyTable

$(".fixed-table-box").emptyTable(rows) => $(".fixed-table-box")对象

emptyTable()可以清空表格的所有数据(表头部会清空),如果有固定列则固定列的内容也会被清空,同时会计算固定列的高度

calFixedColHeight

$.calFixedColHeight($(".fixed-table-box")) => $(".fixed-table-box")对象
$.calFixedColHeight()可以用来计算两侧固定列的高度

calFixedTableWidth

$.calFixedTableWidth($(".fixed-table-box")) => $(".fixed-table-box")对象

$.calFixedTableWidth()可以用来计算表格的实际宽度,如果table的父容器宽度是固定的,而table的宽度为auto,那么table的每一列都会自动调整宽度,并且表格显示的最大宽度就是其父容器的宽度,如果要实现可以横向拖动表格则必须设置表格的宽度为表格的实际宽度。

getScrollWidth

$.getScrollWidth() => 滚动条的宽度
$.getScrollWidth()可以用来获取浏览器滚动条的宽度(这个宽度指的是垂直滚动条的宽度)

isIE

$.isIE() => true/false
$.isIE()可以用来判断浏览器是否是IE浏览器

ajax异步模式

ajax模式指的是表格的dom结构完全由js动态生成,表格内容也由js动态填充。

需要引入的资源:

<link rel="stylesheet" href="css/fixed-table.css" />
<script src="jquery-1.11.3.min.js"></script>
<script src="js/FixedTable.js"></script>

参数配置

  • wrap{select、dom、jQuery Object} [必填] [默认: null] 动态生产的table需要添加到哪个元素中

  • type{string} [可选] [默认: "row-col-fixed"] 表格的类型,可选的值有head-fixed(表头固定)、col-fixed(列固定)、row-col-fixed(列固定,可横向拖动)

  • fields{Array} [必填] [默认: [] ] 表格的表头.该参数必须是一个数组,数组中包含n个对象,对象的具体内容如下:

 [{
     class: "", //需添加在列上的class
     width: "150px", //列的宽度
     /*列显示的值。field可以是普通字符串,当field是普通字符串的时候会自动生成th然后将field的值赋值过去。
     为了让表头也可以更加灵活field的值也可以是HTML代码,当field的值是HTML代码时htmlDom必须为true*/
     field: "日期",
     /*htmlDom表示传递的field是否是HTML字符串。如果htmlDom为true则表示field的值是html字符串,在htmlDom为
     true的情况下传递的class、width、fieldId等参数都将失效。*/
     htmlDom: false,
     fieldId: , //当前列的id
     fixed: false, //当前列是否固定
     fixedDirection: "" //如果是固定列,则该列的方向是在左边还是在右边。值可以为left、right。默认left
 }]
  • extraClass{string} [可选] [默认: ""] 需要添加到表格中的额外class

  • hoverClass{string} [可选] [默认: "rowHover"] 鼠标移入表格中的每一行时添加的class,鼠标移出表格时会移除该class

  • maxHeight{number} [可选] [默认: 0] 设置表格两侧固定列的最大高度,设置最大高度后可以随着表格主体内容上下滚动,它的值必须为number,如果不传递该参数则会自动计算

  • tableDefaultContent{html string、dom、jQuery Object} [可选] [默认: ""] 表格数据还未添加进来时显示的默认内容

  • onHover{Function} [可选] [默认: function (){}] 当鼠标移入到表格的每一行的时候执行的函数

  • init{function} [可选] [默认: function (){}] 表格初始化完毕后执行的函数

addRow

new FixedTable({...}).addRow(rows) => 当前FixedTable实例对象

rows {html字符串、dom对象、jQuery实例、function}[必填] 如果rows为一个function,则该function必须return html字符串或dom对象或jQuery实例

addRow()方法可以为表格动态的添加一行或多行,如果表格有固定列,固定列也会添加相应的行,并且会重新计算固定列的高度

deleteRow

new FixedTable({...}).deleteRow(rows) => 当前FixedTable实例对象

rows {html字符串、dom对象、jQuery实例、function}[必填] 如果rows为一个function,则该function必须return html字符串或dom对象或jQuery实例

deleteRow()方法与addRow()方法类似,在删除了表格主体中指定的行后,如果有固定列,则会同时删除固定列中对应的行,并且计算固定列的高度 查看demo

getRow

new FixedTable({...}).getRow(row) => 一个对象

row {索引、dom对象,jQuery实例}[必填] row参数可以为表格主体行、两侧固定列中的行的数字索引、dom对象,jQuery对象,无论是否能获取到行都会返回一个对象。 返回的对象内容格式如下:查看demo

{
    bodyRow: tr,//表格主体中的行
    leftFixedRow: tr,//左侧固定列的行
    rightFixedRow: tr//右侧固定列的行
}

empty

new FixedTable({...}).empty(rows) => 当前FixedTable实例对象

emptyTable()可以清空表格的所有数据(表头部会清空),如果有固定列则固定列的内容也会被清空,同时会计算固定列的高度

相关插件-图表

jquery_html5_图表

jquery_html5_图表
  图表
 15635  51

百度ets动态添加数据

通过点击不同按钮,进行ajax请求对ets进行数据填充.
  图表
 6598  48

支持ie8的圆形统计比例图

动态统计,支持ie8以及以上版本的ie浏览器,其他的浏览器
  图表
 26000  116

jquery 表行列固定

支持表格行列固定和排序兼容所有浏览器
  图表
 31014  185

讨论这个项目(24)回答他人问题或分享插件使用方法奖励jQ币

    空城 0
    2018/4/24 10:20:07
    x轴向右滚动的时候表头与表体中的列会错位,是个bug吗 回复
    丨Ends 0
    2018/4/12 11:15:36
    请问这个列表宽度可以为百分比吗?手机端不出现滚动条
        xta fnhc tewq0
        2018/4/21 17:52:42
        暂时未实现,过段时间把它实现吧!目前这个版本未对手机进行兼容
    回复
    prisoner, 0
    2018/3/23 15:00:28
    你这个几个表拼起来,有没有想过excel导出的问题?
        xta fnhc tewq0
        2018/3/24 21:15:12
        excel导出跟页面渲染没多大关系吧?
    回复
    玩转地球 0
    2018/3/2 9:55:50
    这个表格怎么获取全部数据呢?我这里想获取表格所有数据提交到服务端,谢谢!!!
    回复
    风之殇 0
    2018/1/18 16:29:02

    有没有实现一二列和第五列固定的方法

    回复
    ?蒌周 0
    2017/12/27 10:43:27

    列宽对不齐,修改如下

    回复
    高华丽 0
    2017/11/21 14:11:34

    获取表格的宽度这一块都是怎么改的?

    回复
    (⊙o⊙) 0
    2017/11/6 23:52:37

    滑到最右边会对不齐啊、

        xta fnhc tewq0
        2017/11/9 21:03:59

        恩,确实有这个情况,之前我也去想过解决方法,但都不理想,目前我没有找到很好的解决办法

        我是你的Wifi0
        2018/1/26 11:55:17

        设置一下右边滚动条的宽度位置什么的吧. 目测对不齐的原因就是因为右边滚动条的宽度

    回复
    潘友清 0
    2017/10/19 17:03:19

    目前这个是单行的表头,如果是多行的表头,需要跨行,跨列的怎么办

        xta fnhc tewq0
        2017/10/26 17:46:28
        这个有待以后实现
        瑾瑜0
        2017/11/29 21:59:55

        我也是这个问题,还要支持点击表头排序

    回复
    潘友清 0
    2017/10/19 15:52:22

    有个问题,就是表内容的边框和表头的边框线没对齐,请看left-fixed.html这个页面,然后将X轴的滚动拖动到最右边,然后看下 "地址\邮编\操作"这3个字段,望修复,谢谢

        xta fnhc tewq0
        2017/10/26 17:53:32
        这个问题我之前也发现了,也找到了解决办法。在表头的末尾加上一个th,设置这个th的宽度为滚动条的宽度,但这又会出现另一个问题:滚动条在最左端时表格内容的边框与表头的边框又会出现不对齐的现象。所以你说的这个问题我还没找到好的解决方法
    回复
取消回复