jquery 表格固定表头列插件

Posted 2020-10-22 tujia

原创插件，转载请声明出处！！！

PS：此插件并无什么效率可言（注重效率就不要用了），然后也不支持旧版本浏览器（不支持css3 pointer-events属性的不能用）

PS2：相比其他插件（例如：http://www.fixedheadertable.com/），我写的这个的唯一优点就是不改变原来的表格结构（实际上是在原表格的容器的下方复制生成三个一样的表格）

 

jquery.fixedtable.js 内容如下：

/*!
 * jQuery Copy Plugin
 * version: 1.0.0-2018.01.31
 * Requires jQuery v1.5 or later
 * Copyright (c) 2018 Tiac
 * http://www.cnblogs.com/tujia/p/8393372.html
 */

// AMD support
(function (factory) {
    "use strict";
    if (typeof define === ‘function‘ && define.amd) {
        // using AMD; register as anon module
        define([‘jquery‘], factory);
    } else {
        // no AMD; invoke directly
        factory( (typeof(jQuery) != ‘undefined‘) ? jQuery : window.Zepto );
    }
}

(function($) {
"use strict";

/*
    Basic Usage:
    -----------

    Html:
        <div style="height: 400px; width: 500px; overflow: auto;">
            <table class="table" cellspacing="0">
                <thead>
                    <tr>
                        <th data-fixed="true">title</th>
                        <th data-fixed="true">title</th>
                        <th data-fixed="true">title</th>
                        <th>title</th>
                        <th>title</th>
                        <th>title</th>
                        <th>title</th>
                        <th>title</th>
                        <th>title</th>
                        <th>title</th>
                        <th>title</th>
                        <th>title</th>
                    </tr>
                </thead>
                <tbody>
                    ……
                </tbody>
            </table>
        </div>

    JS:
        $(‘.table‘).fixedTable();



    Other Usage:
    -----------

    $(‘.table‘).fixedTable({
        fixedColumns: 3,
        offset: {left:-1, top:-1},
        oddColor: ‘#E3EFF5‘,
        evenColor: ‘#FDBDBD‘,
    });

    $(‘.table‘).fixedTable(‘hide‘);
    $(‘.table‘).fixedTable(‘show‘);
    $(‘.table‘).fixedTable(‘refresh‘);
    $(‘.table‘).fixedTable(‘rebuild‘);
    $(‘.table‘).fixedTable(‘destroy‘);
*/

function getHeader(_this){
    var oTable = _this.clone();
    var oThead = oTable.children(‘thead‘).length>0? oTable.children(‘thead‘) : false;
    var oTbody = oTable.children(‘tbody‘).length>0? oTable.children(‘tbody‘) : oTable;
    var oTfoot = oTable.children(‘tfoot‘).length>0? oTable.children(‘tfoot‘) : false;
    
    oTable.width( _this.width() );

    /*if(oThead!=false){
        oTbody.remove();
    }else{
        oTbody.children(‘tr:gt(0)‘).remove();
    }
    if(oTfoot!=false) oTfoot.remove();*/

    var headers = oTable.find(‘tr:eq(0)‘).children();
    _this.find(‘tr:eq(0)‘).children().each(function(i){
        headers.eq(i).css(‘width‘, $(this).width());
        $(this).css(‘width‘, $(this).width());
    });
    
    return oTable;
}

function setPosition(wrapper, isRefresh){
    var oLTable        = wrapper.find(‘.ltableWrapper‘).find(‘.table:eq(0)‘);
    var oThead         = oLTable.children(‘thead‘).length>0? oLTable.children(‘thead‘) : false;
    var oTbody         = oLTable.children(‘tbody‘).length>0? oLTable.children(‘tbody‘) : oLTable;
    
    var oParent        = wrapper.prev(‘div‘);
    var ltableWrapper  = wrapper.find(‘.ltableWrapper‘);
    var lheaderWrapper = wrapper.find(‘.lheaderWrapper‘);
    var rheaderWrapper = wrapper.find(‘.rheaderWrapper‘);

    var options        = oParent.data(‘options‘);
    if(typeof(options)==‘string‘) options = JSON.parse( options );
    
    var scrollW = oLTable.height()>oParent.height()? 16 : 25;

    wrapper.css({
        left: oParent.offset().left + ((isRefresh==true? options.refreshOffset.left:options.offset.left) || 0),
        top: oParent.offset().top + ((isRefresh==true? options.refreshOffset.top:options.offset.top) || 0),
        width: oParent.width(),
        height: oParent.height()
    });

    var fixedWidth      = 0;
    var fixedHeight     = oParent.height()-scrollW;
    var fixedHeadWidth  = wrapper.width()-scrollW;
    var fixedHeadHeight = oThead? oThead.outerHeight() : oTbody.children(‘tr:eq(0)‘).outerHeight();

    if(options.fixedColumns==0){
        fixedWidth  = fixedHeadWidth;
    }else{
        var cells = (oThead || oTbody).children(‘tr:eq(0)‘).children();
        if(cells.eq(options.fixedColumns-1).offset().left>0){
            fixedWidth = cells.eq(options.fixedColumns-1).offset().left - wrapper.offset().left + cells.eq(options.fixedColumns-1).outerWidth(true);
        }else{
            fixedWidth = wrapper.outerWidth()/cells.length*(options.fixedColumns+1);
        }
    }
    ltableWrapper.height( fixedHeight );
    lheaderWrapper.height( fixedHeadHeight );
    rheaderWrapper.height( fixedHeadHeight );

    if(options.fixedColumns==0){
        ltableWrapper.width( 0 );
        lheaderWrapper.width( 0 );
        rheaderWrapper.width( fixedHeadWidth );
    }else{
        ltableWrapper.width( fixedWidth );
        lheaderWrapper.width( fixedWidth );
        rheaderWrapper.width( fixedHeadWidth-20 );
    }
}

$.fn.fixedTable = function(options) {
    if(options===undefined) options = {};

    var defaults = {
        fixedColumns: 0,
        offset: {left:0, top:0},
        refreshOffset: {left:0, top:0},
        oddColor: ‘#ffffff‘,
        evenColor: ‘#F8F8F8‘
    };

    if(typeof(options)==‘object‘){
        options = $.extend(defaults, options);
    }else if(typeof(options)==‘string‘){
        switch(options){
            case ‘show‘:
                this.each(function(){
                    $(this).parent().next(‘.fixedTable‘).show();
                });
                break;
            case ‘hide‘:
                this.each(function(){
                    $(this).parent().next(‘.fixedTable‘).hide();
                });
                break;
            case ‘refresh‘:
                this.each(function(){
                    var wrapper = $(this).parent().next(‘.fixedTable‘);
                    setPosition(wrapper, true);
                });
                break;
            case ‘rebuild‘:
                this.fixedTable(‘destroy‘);
                this.eq(0).parent().attr(‘data-runing‘, 0);
                var options = this.eq(0).parent().data(‘options‘);
                if(typeof(options)==‘string‘) options = JSON.parse( options );
                options.offset = {top:0, left:0};
                this.fixedTable( options );
                break;
            case ‘destroy‘:
                this.each(function(){
                    $(this).parent().next(‘.fixedTable‘).remove();
                });
                break;
        }
        return;
    }

    this.each(function(){
        var _this   = $(this);
        var oParent = _this.parent();

        var oBody = _this.children(‘tbody‘).length>0? _this.children(‘tbody‘) : _this;
        oBody.children(‘tr:odd‘).css(‘background-color‘, options.oddColor);
        oBody.children(‘tr:even‘).css(‘background-color‘, options.evenColor);

        var lheader = getHeader(_this);
        var rheader = lheader.clone();
        
        var oLTable = _this.clone();
        var oThead  = oLTable.children(‘thead‘).length>0? oLTable.children(‘thead‘) : false;
        var oTbody  = oLTable.children(‘tbody‘).length>0? oLTable.children(‘tbody‘) : oLTable;
        var oTfoot  = oLTable.children(‘tfoot‘).length>0? oLTable.children(‘tfoot‘) : false;
        oLTable.width( _this.width() );

        var fixedColumns = (oThead || oTbody).children(‘tr:eq(0)‘).find(‘[data-fixed="true"]‘).length || options.fixedColumns;
        options.fixedColumns = fixedColumns;

        if(oParent.attr(‘data-runing‘)==1){
            oParent.next(‘.fixedTable‘).remove();
        }else{
            oParent.attr(‘data-runing‘, 1);
            oParent.attr(‘data-options‘, JSON.stringify(options));
        }

        var wrapper        = $(‘<div class="fixedTable" style="position:absolute;top:0;left:0;overflow:hidden;pointer-events:none"></div>‘);
        var ltableWrapper  = $(‘<div class="ltableWrapper" style="position:absolute;top:0;left:0;overflow:hidden"></div>‘);
        var lheaderWrapper = $(‘<div class="lheaderWrapper" style="position:absolute;top:0;left:0;overflow:hidden"></div>‘);
        var rheaderWrapper = $(‘<div class="rheaderWrapper" style="position:absolute;top:0;left:0;overflow:hidden"></div>‘);
        ltableWrapper.append(oLTable);
        lheaderWrapper.append(lheader);
        rheaderWrapper.append(rheader);
        oParent.after(wrapper);
        wrapper.append(ltableWrapper).append(rheaderWrapper).append(lheaderWrapper);

        setPosition(wrapper);

        rheaderWrapper.scrollLeft(oParent.scrollLeft());
        ltableWrapper.scrollTop(oParent.scrollTop());
        rheaderWrapper.scrollTop(oParent.scrollTop());

        oParent.unbind(‘scroll‘).on(‘scroll‘, function(){
            var sl=this.scrollLeft,st=this.scrollTop,d=JSON.parse($(this).attr(‘slt‘)||‘{}‘);

            if(sl!=d.sl){
                rheaderWrapper.scrollLeft( $(this).scrollLeft() );
            }

            if(st!=d.st && fixedColumns>0){
                ltableWrapper.scrollTop( $(this).scrollTop() );
            }

            $(this).attr(‘slt‘, JSON.stringify({sl:sl,st:st}));
        });
    });
};

}));