jquery.tableextender.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. // Licensed to Cloudera, Inc. under one
  2. // or more contributor license agreements. See the NOTICE file
  3. // distributed with this work for additional information
  4. // regarding copyright ownership. Cloudera, Inc. licenses this file
  5. // to you under the Apache License, Version 2.0 (the
  6. // "License"); you may not use this file except in compliance
  7. // with the License. You may obtain a copy of the License at
  8. //
  9. // http://www.apache.org/licenses/LICENSE-2.0
  10. //
  11. // Unless required by applicable law or agreed to in writing, software
  12. // distributed under the License is distributed on an "AS IS" BASIS,
  13. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14. // See the License for the specific language governing permissions and
  15. // limitations under the License.
  16. /*
  17. * jHue table extender plugin
  18. *
  19. */
  20. ;
  21. (function ($, window, document, undefined) {
  22. var pluginName = "jHueTableExtender",
  23. defaults = {
  24. fixedHeader:false,
  25. firstColumnTooltip:false,
  26. hintElement:null,
  27. labels:{
  28. GO_TO_COLUMN:"Go to column:",
  29. PLACEHOLDER:"column name..."
  30. }
  31. };
  32. function Plugin(element, options) {
  33. this.element = element;
  34. if (typeof jHueTableExtenderGlobals != 'undefined') {
  35. var extendedDefaults = $.extend({}, defaults, jHueFileChooserGlobals);
  36. extendedDefaults.labels = $.extend({}, defaults.labels, jHueFileChooserGlobals.labels);
  37. this.options = $.extend({}, extendedDefaults, options);
  38. if (options != null) {
  39. this.options.labels = $.extend({}, extendedDefaults.labels, options.labels);
  40. }
  41. }
  42. else {
  43. this.options = $.extend({}, defaults, options);
  44. if (options != null) {
  45. this.options.labels = $.extend({}, defaults.labels, options.labels);
  46. }
  47. }
  48. this._defaults = defaults;
  49. this._name = pluginName;
  50. this.previousPath = "";
  51. this.init();
  52. }
  53. Plugin.prototype.setOptions = function (options) {
  54. this.options = $.extend({}, defaults, options);
  55. drawHeader(this);
  56. };
  57. Plugin.prototype.init = function () {
  58. $.expr[":"].econtains = function (obj, index, meta, stack) {
  59. return (obj.textContent || obj.innerText || $(obj).text() || "").toLowerCase() == meta[3].toLowerCase();
  60. }
  61. var _this = this;
  62. var jHueTableExtenderNavigator = $("<div>").attr("id", "jHueTableExtenderNavigator");
  63. $("<a>").attr("href", "#").addClass("pull-right").html("&times;").click(function (e) {
  64. e.preventDefault();
  65. $(this).parent().hide();
  66. }).appendTo(jHueTableExtenderNavigator);
  67. $("<label>").html(_this.options.labels.GO_TO_COLUMN + " <input type=\"text\" placeholder=\"" + _this.options.labels.PLACEHOLDER + "\" />").appendTo(jHueTableExtenderNavigator);
  68. jHueTableExtenderNavigator.appendTo($("body"));
  69. $(_this.element).find("tbody").click(function (event) {
  70. if ($.trim(getSelection()) == "") {
  71. window.setTimeout(function () {
  72. $(".rowSelected").removeClass("rowSelected");
  73. $(".columnSelected").removeClass("columnSelected");
  74. $(".cellSelected").removeClass("cellSelected");
  75. $(event.target.parentNode).addClass("rowSelected");
  76. $(event.target.parentNode).find("td").addClass("rowSelected");
  77. jHueTableExtenderNavigator
  78. .css("left", (event.clientX + jHueTableExtenderNavigator.width() > $(window).width() - 10 ? event.clientX - jHueTableExtenderNavigator.width() - 10 : event.clientX) + "px")
  79. .css("top", (event.clientY + 10) + "px").show();
  80. jHueTableExtenderNavigator.find("input").focus();
  81. }, 100);
  82. }
  83. });
  84. var source = [];
  85. $(_this.element).find("th").each(function () {
  86. source.push($(this).text());
  87. });
  88. jHueTableExtenderNavigator.find("input").typeahead({
  89. source:source,
  90. updater:function (item) {
  91. jHueTableExtenderNavigator.hide();
  92. $(_this.element).find("tr td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").addClass("columnSelected");
  93. if (_this.options.firstColumnTooltip) {
  94. $(_this.element).find("tr td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").each(function () {
  95. $(this).attr("rel", "tooltip").attr("title", "#" + $(this).parent().find("td:first-child").text()).tooltip({
  96. placement:'left'
  97. });
  98. });
  99. }
  100. $(_this.element).parent().animate({
  101. scrollLeft:$(_this.element).find("th:econtains(" + item + ")").position().left + $(_this.element).parent().scrollLeft() - $(_this.element).parent().offset().left - 30
  102. }, 300);
  103. $(_this.element).find("tr.rowSelected td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").addClass("cellSelected");
  104. }
  105. });
  106. $(_this.element).parent().bind("mouseleave", function () {
  107. jHueTableExtenderNavigator.hide();
  108. });
  109. jHueTableExtenderNavigator.bind("mouseenter", function (e) {
  110. jHueTableExtenderNavigator.show();
  111. });
  112. if (_this.options.hintElement != null) {
  113. var showAlertTimeout = -1;
  114. $(_this.element).find("tbody").mousemove(function () {
  115. window.clearTimeout(showAlertTimeout);
  116. if ($(_this.options.hintElement).data("show") == null || $(_this.options.hintElement).data("show")) {
  117. showAlertTimeout = window.setTimeout(function () {
  118. $(_this.options.hintElement).fadeIn();
  119. }, 1300);
  120. }
  121. });
  122. $(_this.options.hintElement).find(".close").click(function () {
  123. $(_this.options.hintElement).data("show", false);
  124. });
  125. }
  126. if (_this.options.fixedHeader) {
  127. drawHeader(_this);
  128. }
  129. };
  130. function drawHeader(_this) {
  131. $(".jHueTableExtenderClonedContainer").remove();
  132. var clonedTable = $(_this.element).clone();
  133. clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
  134. clonedTable.removeClass("resultTable").find("tbody").remove();
  135. $(_this.element).find("thead>tr th").each(function (i) {
  136. var originalTh = $(this);
  137. clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");
  138. clonedTable.find("thead>tr th:eq(" + i + ")").click(function () {
  139. originalTh.click();
  140. clonedTable.find("thead>tr th").attr("class", "sorting");
  141. $(this).attr("class", originalTh.attr("class"));
  142. });
  143. });
  144. var clonedTableContainer = $("<div>").width($(_this.element).outerWidth());
  145. clonedTable.appendTo(clonedTableContainer);
  146. var clonedTableVisibleContainer = $("<div>").addClass("jHueTableExtenderClonedContainer").width($(_this.element).parent().width()).css("overflow-x", "hidden");
  147. clonedTableVisibleContainer.css("position", "fixed");
  148. clonedTableContainer.appendTo(clonedTableVisibleContainer);
  149. clonedTableVisibleContainer.prependTo($(_this.element).parent());
  150. $(_this.element).parent().scroll(function () {
  151. clonedTableVisibleContainer.scrollLeft($(this).scrollLeft());
  152. });
  153. $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
  154. window.setInterval(function () {
  155. if ($(_this.element).parent().width() != $(_this.element).parent().data("w")) {
  156. clonedTableVisibleContainer.width($(_this.element).parent().width());
  157. $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
  158. $(_this.element).find("thead>tr th").each(function (i) {
  159. clonedTable.find("thead>tr th:eq(" + i + ")").width($(this).width()).css("background-color", "#FFFFFF");
  160. });
  161. }
  162. }, 250);
  163. $(_this.element).parent().resize(function () {
  164. clonedTableVisibleContainer.width($(this).width());
  165. });
  166. }
  167. function getSelection() {
  168. var t = '';
  169. if (window.getSelection) {
  170. t = window.getSelection();
  171. } else if (document.getSelection) {
  172. t = document.getSelection();
  173. } else if (document.selection) {
  174. t = document.selection.createRange().text;
  175. }
  176. return t.toString();
  177. }
  178. $.fn[pluginName] = function (options) {
  179. return this.each(function () {
  180. if (!$.data(this, 'plugin_' + pluginName)) {
  181. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  182. }
  183. else {
  184. $.data(this, 'plugin_' + pluginName).setOptions(options);
  185. }
  186. });
  187. }
  188. })(jQuery, window, document);