1/* 2* CongelarFilaColumna is a jQuery plugin that allows freezing of rows and columns. 3* Scrolling can be enabled. Both rows and columns can be frozen. Rows to be frozen 4* should be placed in 'thead' (whole frozen header). You can freeze rows and columns combined with colspan or rowspan. 5* 6* 7* Copyright (c) 2017 8* Author: Agustin Rios Reyes. 9* Email: [email protected] 10* Github: https://github.com/nitsugario/jQuery-Freeze-Table-Column-and-Rows 11* Versión: 2.2 12* 13* Licensed under MIT 14* http://www.opensource.org/licenses/mit-license.php 15* 16*/ 17 18(function($) 19{ 20 $.fn.CongelarFilaColumna = function (method) 21 { 22 23 var defaults = 24 { 25 width: '100%', 26 height: '100%', 27 Columnas: 1, //Number of columns fixed 28 soloThead : true, //only the fixed header 29 coloreacelda: false, 30 colorcelda: '#F4FA58', 31 lboHoverTr: false, 32 tfoot: false 33 }; 34 var settings = {}; 35 var methods = 36 { 37 init: function (options) 38 { 39 settings = $.extend({}, defaults, options); 40 41 return this.each(function () 42 { 43 var $tabla = $(this); 44 45 if (helpers._EsUnaTabla($tabla)) 46 { 47 methods.setup.apply(this, Array.prototype.slice.call(arguments, 1)); 48 } 49 else 50 { 51 $.error('La Tabla No es válida. :( '); 52 }; 53 }); 54 }, 55 setup: function () 56 { 57 if ( settings.soloThead ) 58 { 59 var $wrapper, 60 $lobTable = $(this), 61 lobTable = this, 62 lstClassTable = $lobTable.attr("class"); 63 64 helpers._ObtenerAsignarAnchoAltoThead( $lobTable ); 65 66 var lobThead = $lobTable.find("thead").clone(), 67 lnuWidthTable = $lobTable.width(), 68 lobTableThead = $("<table>").attr("class",lstClassTable).append(lobThead); 69 70 71 settings.scrollbarOffset = helpers._OptenerWidthBarraScroll(); 72 $lobTable.css({'width':lnuWidthTable}); 73 74 if (!$lobTable.closest('.fht-table-wrapper').length) 75 { 76 $lobTable.addClass('fht-table'); 77 $lobTable.wrap('<div class="fht-table-wrapper"></div>'); 78 } 79 80 $wrapper = $lobTable.closest('.fht-table-wrapper'); 81 82 if ( $wrapper.find('.fht-fixed-body').length == 0) 83 $lobTable.wrap('<div class="fht-fixed-body"></div>'); 84 85 $fixedBody = $wrapper.find('.fht-fixed-body'); 86 87 $wrapper.css({ 88 width: settings.width, 89 height: settings.height 90 }); 91 92 /*Agregamos la tabla completa a fht-tbody-conten*/ 93 $lobTable.wrap('<div class="fht-tbody"><div class="fht-tbody-conten"></div></div>'); 94 $lobTable.closest('.fht-tbody-conten').css({'width':lnuWidthTable}); 95 $lobDivBody = $wrapper.find('div.fht-tbody'); 96 97 /*Agregamos el encabesado clonado al div fht-thead*/ 98 $lobDivTHead = $('<div class="fht-thead"></div>').prependTo($fixedBody).css({'width':lnuWidthTable}); 99 lobTableThead.css({'width':lnuWidthTable}); 100 $lobDivTHead.append(lobTableThead).css({'width':lnuWidthTable}); 101 102 $lobTable.css({ 103 'margin-top': -$lobDivTHead.outerHeight(true) 104 }); 105 106 var lnuTbodyHeight = $wrapper.height() - $lobDivTHead.outerHeight(true); 107 108 $lobDivBody.css({ 109 'height': lnuTbodyHeight, 110 'width':lnuWidthTable+settings.scrollbarOffset+2 111 }); 112 113 helpers._OnScroll( $lobDivBody ); 114 115 return lobTable; 116 } 117 else 118 { 119 var $wrapper, 120 $tabla = $(this), 121 tabla = this, 122 contenedor = $(this).parent(), 123 classT = $tabla.attr("class"); 124 125 helpers._ObtenerAsignarAnchoAlto($tabla); 126 127 var thead = $tabla.find("thead").clone(), 128 anchotabla = $tabla.width(), 129 tablaTH = $("<table>").attr("class",classT).append(thead), 130 $tablaTHCol = $("<table>").attr("class",classT).append($("<thead>")), 131 $tablaTBCol = $("<table>").attr("class",classT).append($("<tbody>")); 132 133 settings.scrollbarOffset = helpers._OptenerWidthBarraScroll(); 134 $tabla.css({'width':anchotabla}); 135 136 tablaTH.addClass('fht-table'); 137 $tablaTHCol.addClass('fht-table'); 138 $tablaTBCol.addClass('fht-table'); 139 140 helpers._ClonarHeaderColumnasACongelar($tabla,$tablaTHCol,'thead',settings.Columnas); 141 helpers._ClonarHeaderColumnasACongelar($tabla,$tablaTBCol,'tbody',settings.Columnas); 142 143 if( settings.tfoot) 144 { 145 $tablaTBCol.append($("<tfoot>")); 146 helpers._ClonarHeaderColumnasACongelar($tabla,$tablaTBCol,'tfoot',settings.Columnas); 147 } 148 149 if (!$tabla.closest('.fht-table-wrapper').length) 150 { 151 $tabla.addClass('fht-table'); 152 $tabla.wrap('<div class="fht-table-wrapper"></div>'); 153 } 154 155 $wrapper = $tabla.closest('.fht-table-wrapper'); 156 157 if ( $wrapper.find('.fht-fixed-column').length == 0) 158 { 159 $tabla.wrap('<div class="fht-fixed-body"></div>'); 160 $('<div class="fht-fixed-column"></div>').prependTo($wrapper); 161 $fixedBody = $wrapper.find('.fht-fixed-body'); 162 } 163 164 $wrapper.css({ 165 width: settings.width, 166 height: settings.height 167 }); 168 169 if (!$tabla.hasClass('fht-table-init')) 170 { 171 $tabla.wrap('<div class="fht-tbody"><div class="fht-tbody-conten"></div></div>'); 172 } 173 174 $tabla.closest('.fht-tbody-conten').css({'width':anchotabla}); 175 $divBody = $wrapper.find('div.fht-tbody'); 176 177 if (!$tabla.hasClass('fht-table-init')) 178 { 179 180 $divHead = $('<div class="fht-thead"></div>').prependTo($fixedBody).css({'width':anchotabla}); 181 182 tablaTH.css({'width':anchotabla}); 183 184 $divHead.append(tablaTH).css({'width':anchotabla}); 185 } 186 else 187 { 188 $divHead = $wrapper.find('div.fht-thead'); 189 } 190 191 $tabla.css({ 192 'margin-top': -$tabla.find('thead').outerHeight(true) 193 }); 194 195 var tbodyHeight = $wrapper.height() - $divHead.outerHeight(true); 196 197 $divBody.css({ 198 'height': tbodyHeight 199 }); 200 201 $tabla.addClass('fht-table-init'); 202 203 var $fixedColumn = $wrapper.find('.fht-fixed-column'); 204 205 var $thead = $('<div class="fht-thead"></div>').append($tablaTHCol), 206 $tbody = $('<div class="fht-tbody"></div>').append($tablaTBCol), 207 $fixedBody = $wrapper.find('.fht-fixed-body'), 208 fixedBodyWidth = $wrapper.width(), 209 fixedBodyHeight = $fixedBody.find('.fht-tbody').outerHeight() - settings.scrollbarOffset; 210 211 $thead.appendTo($fixedColumn); 212 213 var AnchoCol = $thead.find('table').width()+1; 214 215 $thead.find('table').css({'width': AnchoCol,'height':$divHead.outerHeight(true)}); 216 $tbody.find('table').css({'width': AnchoCol}); 217 218 $tbody.appendTo($fixedColumn).css({ 219 'height': fixedBodyHeight+2, 220 'background-color': '#ffffff' 221 }); 222 223 $fixedColumn.css({ 224 'width': AnchoCol 225 }); 226 227 $fixedBody.css({ 228 'width': fixedBodyWidth 229 }); 230 231 helpers._OnScroll($divBody); 232 233 return tabla; 234 }; 235 } 236 }; 237 var helpers = 238 { 239 /* 240 * return boolean 241 * valida si el elemento tien un thead y un tbody. 242 */ 243 _EsUnaTabla: function($obj) 244 { 245 var $tabla = $obj, 246 TieneTable = $tabla.is('table'), 247 TieneThead = $tabla.find('thead').length > 0, 248 TieneTbody = $tabla.find('tbody').length > 0; 249 250 if (TieneTable && TieneThead && TieneTbody) 251 { 252 return true; 253 } 254 255 return false;
256 }, 257 _ObtenerAsignarAnchoAltoThead: function($obj) 258 { 259 var $lobTable = $obj; 260 261 $lobTable.find("thead tr").each(function() 262 { 263 $(this).find("th").each(function() 264 { 265 if( settings.coloreacelda ) 266 $(this).css({'background-color': settings.colorcelda}); 267 268 $(this).css({'width':$(this).width(),'height':$(this).height(),'overflow': 'hidden'}); 269 }); 270 }); 271 }, 272 _ObtenerAsignarAnchoAlto: function($obj) 273 { 274 var $tabla = $obj, 275 lstTipoThTd = "", 276 lnuCuentaColumnasFila = 1, 277 lnuColumnasFijas = settings.Columnas, 278 lboRowspan = false, 279 lboColspan = false, 280 lboMasColumnas = true, 281 lboFaltaColumnaFila = false, 282 lnuCuantosColspan = 0, 283 lnuCuentaColspan = 0, 284 lnuCuantosRowspan = 0, 285 lnuCuentaRowspan = 0, 286 lnuCuentaRowspanFaltan = 0; 287 288 $tabla.find("tr").each(function(lnuFila) 289 { 290 lstTipoThTd = ( $(this).parent().is('thead') ) ? 'th' : ( $(this).parent().is('tbody') ) ? 'td' : ( $(this).parent().is('tfoot') ) ? 'td' : 'undefined'; 291 292 //-- Asignar un identificador a las filas, si no lo tienen. 293 if( $(this).parent().is('tbody') || $(this).parent().is('tfoot') ) 294 { 295 lstSigla = ( $(this).parent().is('thead') ) ? 'th' : ( $(this).parent().is('tbody') ) ? 'tb' : ( $(this).parent().is('tfoot') ) ? 'tf' : 'undefined'; 296 lstIdTr = lstSigla+lnuFila; 297 298 if( settings.lboHoverTr ) 299 if( !$(this).attr("id") ) 300 $(this).attr("id",lstIdTr); 301 } 302 303 if ( !lboRowspan ) 304 { 305 $(this).find( lstTipoThTd ).each(function(lnuCell) 306 { 307 if ( lnuCuentaColumnasFila <= lnuColumnasFijas ) 308 { 309 if ( $(this).attr("rowspan") > 1 ) 310 { 311 if ( $(this).attr( "colspan" ) > 1) 312 lnuCuentaRowspan = lnuCuentaRowspan-parseInt($(this).attr( "colspan" ))-1; 313 else 314 lnuCuentaRowspan++; 315 316 if( lnuCuantosRowspan < $(this).attr("rowspan") ) 317 { 318 lnuCuantosRowspan = $(this).attr("rowspan")-1; 319 lboFaltaColumnaFila = true; 320 } 321 else 322 lboFaltaColumnaFila = true; 323 324 lnuCuentaRowspanFaltan = $(this).attr("rowspan")-1; 325 lboRowspan = true; 326 } 327 328 if ( $(this).attr( "colspan" ) > 1 ) 329 lnuCuentaColumnasFila += parseInt($(this).attr( "colspan" )); 330 else 331 lnuCuentaColumnasFila++; 332 333 if( settings.coloreacelda ) 334 $(this).css({'background-color': settings.colorcelda}); 335 336 $(this).css({'width':$(this).width(),'height':$(this).height(),'overflow': 'hidden'}); 337 } 338 }); 339 340 lnuCuentaColumnasFila = 1; 341 342 if( lboRowspan ) 343 lnuCuantosRowspan--; 344 } 345 else 346 { 347 var lnuFaltan = lnuColumnasFijas - lnuCuentaRowspan; 348 lnuCuentaRowspanFaltan--; 349 350 if ( lnuCuantosRowspan-- <= 0 ) 351 { 352 lboRowspan = false; 353 lnuCuentaRowspan = 0; 354 355 if( lnuFaltan > 0 ) 356 { 357 lnuCuentaColumnasFila3 = 1; 358 lnuColumnasFijas3 = lnuFaltan; 359 360 $(this).find( lstTipoThTd ).each(function(lnuCell) 361 { 362 if ( lnuCuentaColumnasFila3 <= lnuColumnasFijas3 ) 363 { 364 if ( $(this).attr( "colspan" ) > 1 ) 365 lnuCuentaColumnasFila3 += parseInt($(this).attr( "colspan" )); 366 else 367 lnuCuentaColumnasFila3++; 368 369 if( settings.coloreacelda ) 370 $(this).css({'background-color': settings.colorcelda}); 371 372 $(this).css({'width':$(this).width(),'height':$(this).height(),'overflow': 'hidden'}); 373 } 374 }); 375 376 lnuCuentaColumnasFila3 = 1; 377 } 378 } 379 else 380 { 381 lnuCuentaColumnasFila2 = 1; 382 lnuColumnasFijas2 = lnuFaltan; 383 384 $(this).find( lstTipoThTd ).each(function(lnuCell) 385 { 386 if ( lnuCuentaColumnasFila2 <= lnuColumnasFijas2 ) 387 { 388 if ( $(this).attr( "colspan" ) > 1 ) 389 lnuCuentaColumnasFila2 += parseInt($(this).attr( "colspan" )); 390 else 391 lnuCuentaColumnasFila2++; 392 393 if( settings.coloreacelda ) 394 $(this).css({'background-color': settings.colorcelda}); 395 396 $(this).css({'width':$(this).width(),'height':$(this).height(),'overflow': 'hidden'}); 397 } 398 }); 399 400 lnuCuentaColumnasFila2 = 1; 401 } 402 403 }; 404 }); 405 }, 406 _ClonarHeaderColumnasACongelar: function($pobTabla,$ponDonde,pstTipoThTbTf,pnuCuantasCols) 407 { 408 var lnuCuentaColumnasFila = 1, 409 lnuColumnasFijas = pnuCuantasCols, 410 lboRowspan = false, 411 lboColspan = false, 412 lboMasColumnas = true, 413 lboFaltaColumnaFila = false, 414 lnuCuantosColspan = 0, 415 lnuCuentaColspan = 0, 416 lnuCuantosRowspan = 0, 417 lnuCuentaRowspan = 0, 418 lnuCuentaRowspanFaltan = 0, 419 $lobTrThTd = $pobTabla.find(pstTipoThTbTf), 420 lstTipoThTd = (pstTipoThTbTf == "thead") ? "th" : (pstTipoThTbTf == "tbody" || pstTipoThTbTf =='tfoot') ? "td" : "td", 421 $lobClonarTrThTd; 422 423 $lobTrThTd.find("tr").each(function(lnuFila) 424 { 425 if( settings.lboHoverTr )// Asignar el evento hover a las filas para marcarlas. 426 if( pstTipoThTbTf =='tbody' || pstTipoThTbTf =='tfoot' ) 427 { 428 $(this).hover( 429 function() 430 { 431 lstIdTr = "#"+$(this).attr("id"); 432 $(this).css( "background", "rgba(182,227,250,0.6)" ); 433 $(lstIdTr).css( "background", "rgba(182,227,250,0.6)" ); 434 }, 435 function() { 436 lstIdTr = "#"+$(this).attr("id"); 437 $(this).css( "background", "" ); 438 $(lstIdTr).css( "background", "" ); 439 } 440 ); 441 } 442 443 if ( !lboRowspan ) 444 { 445 var tr = $(this).clone(true).html(""); 446 447 $(this).find( lstTipoThTd ).each(function(lnuCell) 448 { 449 if ( lnuCuentaColumnasFila <= lnuColumnasFijas ) 450 { 451 if ( $(this).attr("rowspan") > 1 ) 452 { 453 if ( $(this).attr( "colspan" ) > 1 ) 454 lnuCuentaRowspan = lnuCuentaRowspan-parseInt($(this).attr( "colspan" ))-1; 455 else 456 lnuCuentaRowspan++; 457 458 if( lnuCuantosRowspan < $(this).attr("rowspan") ) 459 { 460 lnuCuantosRowspan = $(this).attr("rowspan")-1; 461 lboFaltaColumnaFila = true; 462 } 463 else 464 lboFaltaColumnaFila = true; 465 466 lnuCuentaRowspanFaltan = $(this).attr("rowspan")-1; 467 lboRowspan = true; 468 } 469 470 if ( $(this).attr( "colspan" ) > 1 ) 471 lnuCuentaColumnasFila += parseInt($(this).attr( "colspan" )); 472 else 473 lnuCuentaColumnasFila++; 474 475 if (lnuCell == 0) 476 { 477 $lobClonarTrThTd = tr.appendTo($ponDonde.find(pstTipoThTbTf)); 478 $lobClonarTrThTd.append($(this).clone()); 479 } 480 else 481 $lobClonarTrThTd.append($(this).clone()); 482 } 483 }); 484 485 lnuCuentaColumnasFila = 1; 486 487 if( lboRowspan ) 488 lnuCuantosRowspan--; 489 } 490 else 491 { 492 var lnuFaltan = lnuColumnasFijas - lnuCuentaRowspan; 493 lnuCuentaRowspanFaltan--; 494 495 if ( lnuCuantosRowspan-- <= 0 ) 496 { 497 lboRowspan = false;
498 lnuCuentaRowspan = 0; 499 500 if( lnuFaltan > 0 ) 501 { 502 lnuCuentaColumnasFila3 = 1; 503 lnuColumnasFijas3 = lnuFaltan; 504 var tr = $(this).clone(true).html(""); 505 506 $(this).find( lstTipoThTd ).each(function(lnuCell) 507 { 508 if ( lnuCuentaColumnasFila3 <= lnuColumnasFijas3 ) 509 { 510 if ( $(this).attr( "colspan" ) > 1 ) 511 lnuCuentaColumnasFila3 += parseInt($(this).attr( "colspan" )); 512 else 513 lnuCuentaColumnasFila3++; 514 515 if (lnuCell == 0) 516 { 517 $lobClonarTrThTd = tr.appendTo($ponDonde.find(pstTipoThTbTf)); 518 $lobClonarTrThTd.append($(this).clone()); 519 } 520 else 521 $lobClonarTrThTd.append($(this).clone()); 522 } 523 }); 524 525 lnuCuentaColumnasFila3 = 1; 526 } 527 else 528 { 529 var tr = $(this).clone(true).html(""); 530 tr.appendTo($ponDonde.find(pstTipoThTbTf)); 531 } 532 } 533 else 534 { 535 if( lnuFaltan > 0 ) 536 { 537 lnuCuentaColumnasFila2 = 1; 538 lnuColumnasFijas2 = lnuFaltan; 539 var tr = $(this).clone(true).html(""); 540 541 $(this).find( lstTipoThTd ).each(function(lnuCell) 542 { 543 if ( lnuCuentaColumnasFila2 <= lnuColumnasFijas2 ) 544 { 545 if ( $(this).attr( "colspan" ) > 1 ) 546 lnuCuentaColumnasFila2 += parseInt($(this).attr( "colspan" )); 547 else 548 lnuCuentaColumnasFila2++; 549 550 if (lnuCell == 0) 551 { 552 $lobClonarTrThTd = tr.appendTo($ponDonde.find(pstTipoThTbTf)); 553 $lobClonarTrThTd.append($(this).clone()); 554 } 555 else 556 $lobClonarTrThTd.append($(this).clone()); 557 } 558 }); 559 560 lnuCuentaColumnasFila2 = 1; 561 } 562 else 563 { 564 var tr = $(this).clone(true).html(""); 565 tr.appendTo($ponDonde.find(pstTipoThTbTf)); 566 } 567 } 568 }; 569 }); 570 }, 571 _OnScroll: function($obj) 572 { 573 var $tabla = $obj, 574 $wrapper = $tabla.closest('.fht-table-wrapper'), 575 $thead = $tabla.siblings('.fht-thead'); 576 577 $tabla.on('scroll', function() 578 { 579 if( !settings.soloThead ) 580 { 581 var $fixedColumns = $wrapper.find('.fht-fixed-column'); 582 583 $fixedColumns.find('.fht-tbody table').css({ 584 'margin-top': -$tabla.scrollTop() 585 }); 586 } 587 588 $thead.find('table').css({ 589 'margin-left': -this.scrollLeft 590 }); 591 592 }); 593 }, 594 _OptenerWidthBarraScroll: function() 595 { 596 var scrollbarWidth = 0; 597 598 if (!scrollbarWidth) 599 { 600 if (/msie/.test(navigator.userAgent.toLowerCase())) 601 { 602 var $textarea1 = $('<textarea cols="10" rows="2"></textarea>').css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'), 603 $textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>').css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'); 604 605 scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; 606 $textarea1.add($textarea2).remove(); 607 608 } 609 else 610 { 611 var $div = $('<div />').css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 }) 612 .prependTo('body').append('<div />').find('div') 613 .css({ width: '100%', height: 200 }); 614 615 scrollbarWidth = 100 - $div.width(); 616 $div.parent().remove(); 617 618 } 619 } 620 621 return scrollbarWidth; 622 } 623 }; 624 625 if (methods[method]) 626 return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 627 else if (typeof method === 'object' || !method) 628 return methods.init.apply(this, arguments); 629 else 630 $.error('El Método "' + method + '" No existe en el plugin CongelarFilaColumna! :( '); 631 632 } 633})(jQuery);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.