jquery 表格固定表头、列插件

/*! * 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})); ???????}); ???});};}));