tableHeadFix.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. (function($) {
  2. $.chromatable = {
  3. defaults : {
  4. width : "900px",
  5. height : "300px",
  6. scrolling : "yes"
  7. }
  8. };
  9. $.fn.chromatable = function(options) {
  10. var options = $.extend({}, $.chromatable.defaults, options);
  11. return this
  12. .each(function() {
  13. var $this = $(this);
  14. var $uniqueID = $(this).attr("ID") + ("wrapper");
  15. $(this).css('width', options.width).addClass("_scrolling");
  16. $(this).wrap(
  17. '<div class="scrolling_outer"><div id="'
  18. + $uniqueID
  19. + '" class="scrolling_inner"></div></div>');
  20. $(".scrolling_outer").css({
  21. 'position' : 'relative'
  22. });
  23. $("#" + $uniqueID).css({
  24. 'border' : '1px solid #CCCCCC',
  25. 'overflow-x' : 'hidden',
  26. 'overflow-y' : 'auto',
  27. 'padding-right' : '17px'
  28. });
  29. $("#" + $uniqueID).css('height', options.height);
  30. $("#" + $uniqueID).css('width', options.width);
  31. $(this).before(
  32. $(this).clone().attr("id", "").addClass("_thead")
  33. .css({
  34. 'width' : 'auto',
  35. 'display' : 'block',
  36. 'position' : 'absolute',
  37. 'border' : 'none',
  38. 'border-bottom' : '1px solid #CCC',
  39. 'top' : '1px'
  40. }));
  41. $('._thead').children('tbody').remove();
  42. $(this)
  43. .each(
  44. function($this) {
  45. if (options.width == "100%"
  46. || options.width == "auto") {
  47. $("#" + $uniqueID).css({
  48. 'padding-right' : '0px'
  49. });
  50. }
  51. if (options.scrolling == "no") {
  52. $("#" + $uniqueID)
  53. .before(
  54. '<a href="javascript:;" class="expander" style="width:100%;">Expand table</a>');
  55. $("#" + $uniqueID).css({
  56. 'padding-right' : '0px'
  57. });
  58. $(".expander")
  59. .each(
  60. function(int) {
  61. $(this).attr(
  62. "ID",
  63. int);
  64. $(this)
  65. .bind(
  66. "click",
  67. function() {
  68. $("#"+ $uniqueID).css(
  69. {
  70. 'height' : 'auto'
  71. });
  72. $("#"+ $uniqueID+ " ._thead").remove();
  73. $(this).remove();
  74. });
  75. });
  76. $("#" + $uniqueID).resizable({
  77. handles : 's'
  78. }).css("overflow-y", "hidden");
  79. }
  80. });
  81. $curr = $this.prev();
  82. $("thead:eq(0)>tr th", this).each(
  83. function(i) {
  84. $("thead:eq(0)>tr th:eq(" + i + ")", $curr)
  85. .width($(this).width());
  86. });
  87. if (options.width == "100%" || "auto") {
  88. $(window).resize(function() {
  89. resizer($this);
  90. });
  91. }
  92. });
  93. };
  94. function resizer($this) {
  95. $curr = $this.prev();
  96. $("thead:eq(0)>tr th", $this).each(function(i) {
  97. $("thead:eq(0)>tr th:eq(" + i + ")", $curr).width($(this).width());
  98. });
  99. }
  100. ;
  101. })(jQuery);