Jquery插件 表格固定表头

Table固定表头是老生常谈的东西，从网上看了很多人的实现，但都不够满意，很多原因，比如说效果根本就没实现，要不就是易用性很差，于是自己试着写了一个Jquery固定表头的插件，与各位共享，此插件还在测试阶段，如果想要直接使用请各位根据自己项目微调。

实现原理图：

针对原理图的说明：

         所有的行（tr）可分为表头和表体两部分，把表格拆分为两个表格，第一个表格放表头，第二个表格放表体，我们要拖动的是表体，所以把第二个表格再用一层div包装起来，目的是为了Scroll，之后整体再用一层大的div包裹起来，看上去就成了一个完整的表格，其实成型的效果是有2个div，2个table组装而成的，而原来的那个表格根本就没用了，直接删除掉就OK了。

Jquery插件代码：

View Code

//+---------------------------------------------------

//| jQuery插件:表头固定 （还需测试）

//| author：阿明

//+---------------------------------------------------

(function ($) {

    $.fn.extend({

        ScrollTable: function (options) {

            var defaults = {

                MaxHeight: 120,

                MaxDataItemIndex: 1 // 固定前MaxDataItemIndex作为固定表头

            };

            options = $.extend(defaults, options);

 

            return this.each(function () {

                var $this = $(this);

 

                // 产生表头部分和身体部分

                var $cloneTableHeader = $this.clone();

                var $cloneTableBody = $this.clone();

                $cloneTableHeader.find("tr").filter(function (index) { return index >= options.MaxDataItemIndex }).remove();

                $cloneTableBody.find("tr").filter(function (index) { return index < options.MaxDataItemIndex }).remove();

 

                // 将产生的表头和身体部分放入Container，并做一些微调

                $this.after("<div class='ScrollTableContainer' style='border:1px solid;'></div>");

                $this.next().append($cloneTableHeader);

                $this.next().append("<div class='ScrollDiv' style='overflow-y:scroll;'></div>");

                $this.next().css("width", $this.width() + 20);

                $this.next().find("div.ScrollDiv").css({

                    "max-height": options.MaxHeight,

                    "width": $this.width() + 20,

                    "margin-top": -2

                });

                $this.next().find("div.ScrollDiv").append($cloneTableBody);

                $this.remove();

            });

        }

    });

})(jQuery);

　　

View Code

 

 

分类: Jquery

标签: Jquery, 插件, 固定表头