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

所属分类:UI-图表

 1483  20  查看评论 (3)
jQuery锁定表头和固定列插件FixedTable ie兼容8

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()可以清空表格的所有数据(表头部会清空),如果有固定列则固定列的内容也会被清空,同时会计算固定列的高度

相关插件-图表

Highcharts图表库

功能强大、开源、美观、图表丰富、兼容绝大多数浏览器的js图表库
  图表
 22702  87

amcharts图表统计插件(推荐)

国内各大网站都在使用图标统计,包含折线图、柱状图、饼图等,2D和3D效果,纯JS生成
  图表
 20199  120

纯css3样式控制table表格隔行高亮显示

纯css3样式控制table表格隔行高亮显示,简单实用。
  图表
 3911  6

Table表单数据处理插件DataTables

table表单数据处理,可以对数据进行排序,筛选,查找
  图表
 22487  90

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

    让我感激你、曾予我欢颜 0
    2017/9/13 11:49:44
    dyyzht 0
    2017/9/13 9:56:57
    沉在海底的石子 0
    2017/9/12 9:45:56
取消回复