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

所属分类:UI-图表

 88129  454  查看评论 (58)
分享到微信朋友圈
X
jQuery锁定表头和固定列插件FixedTable ie兼容8

更新时间:2020-06-03 23:53:07

更新内容:jQuery版本表格宽度算法优化


更新时间: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甘特图实例

JQUERY甘特图实例
  图表
 53540  344
  图表
 67644  601

支持编辑列和添加删除行的表格组件

这是一款基于jquery开发的可动态生成表格的组件
  图表
 28817  312

柱状图、折线图、饼状图 等图表插件

柱状图、折线图、饼状图 等图表插件
  图表
 83738  504

讨论这个项目(58)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?怯宙(*^__^*) 0
    2021/8/5 10:25:00
    一个页面有两个这种表格 第二个不好用 怎么解决 回复
    ??emmm 0
    2021/2/19 16:00:24
    如果没有数据的情况表头就缩到一起了 回复
    再见亦是泪 0
    2020/11/3 14:40:01
    数据一多,页面渲染的时候布局有点乱,有啥办法可以页面加载的时候先隐藏表格,然后再显示 回复
    那时年少 0
    2020/8/27 11:27:10
    表头有合并行列的情况,插件有解决吗 回复
    Sensir 0
    2020/7/22 9:53:42
    刚下载,先支持一下 回复
    I’m Cai。 0
    2020/5/4 17:55:54
    使用index - 副本.html,首行是undefined,如何解决
        xta fnhc tewq0
        2020/6/3 14:57:57
        ```
        fields: [//表格的列
             {
                   width: "150px",
                    name: "日期",
                    fixed: true
              },
              {
                     width: "120px",
                      name: "姓名",
                      fixed: false
               }
        ]
        ```
        数组中每项的 `name`
        改为 `field`
        就可以了, 如:
        ``
        ``
        fields: [ //表格的列
            {
                width: "150px",
                name: "日期",
                field: true
            },
            {
                width: "120px",
                field: "姓名",
                fixed: false
            }
        ]
        ```
    回复
    En attendant, oublier 1
    2019/8/14 15:45:53

    css添加这个 右侧滚动就会和左侧一直同步不会错位

    .fixed - table_body - wraper { /*设定高度*/
        max - height: 400 px;
    }
    .fixed - table_fixed.fixed - table_body - wraper { /*设定高度*/
        max - height: 380 px;
    }
        xta fnhc tewq0
        2020/6/3 12:15:34
        新版已经解决这个问题了
    回复
    不言 0
    2019/4/25 10:17:52
    大神们怎么合并表头列呀 回复
    Big Big World 0
    2019/4/18 12:22:04
    在弹窗中做这个就没法获取元素的各种width height值,没法判断是否显示滚动条
        xta fnhc tewq0
        2020/6/3 14:49:06
        弹窗中你需要在弹窗显示以后再初始化表格
    回复
    当时我就蒙逼了_ 0
    2019/3/29 17:31:04
    固定列后表格不对齐,怎么设置都不生效。白白浪费俩小时
        En attendant, oublier 0
        2019/8/14 15:44:03
        给固定列加一个小于表格内容高度10px的高度值就可以用了
        xta fnhc tewq0
        2020/6/3 12:16:02
        新版已经解决这个问题了
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复