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

实现原理图:

Jquery插件 -- 表格固定表头

 

针对原理图的说明:

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

Jquery插件代码:

//+---------------------------------------------------
//| 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);

  

 
 
Jquery
固定表头

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

实现原理图:

Jquery插件 -- 表格固定表头

 

针对原理图的说明:

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

Jquery插件代码:

//+---------------------------------------------------
//| 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);

  

相关文章: