jquery.tableextender.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  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.resetSource = function() {
  58. var _this = this;
  59. var source = [];
  60. $(this.element).find("th").each(function () {
  61. source.push($(this).text());
  62. });
  63. $("#jHueTableExtenderNavigator").find("input").data('typeahead').source = source;
  64. };
  65. Plugin.prototype.init = function () {
  66. $.expr[":"].econtains = function (obj, index, meta, stack) {
  67. return (obj.textContent || obj.innerText || $(obj).text() || "").toLowerCase() == meta[3].toLowerCase();
  68. }
  69. var _this = this;
  70. var jHueTableExtenderNavigator = $("<div>").attr("id", "jHueTableExtenderNavigator");
  71. $("<a>").attr("href", "#").addClass("pull-right").html("&times;").click(function (e) {
  72. e.preventDefault();
  73. $(this).parent().hide();
  74. }).appendTo(jHueTableExtenderNavigator);
  75. $("<label>").html(_this.options.labels.GO_TO_COLUMN + " <input type=\"text\" placeholder=\"" + _this.options.labels.PLACEHOLDER + "\" />").appendTo(jHueTableExtenderNavigator);
  76. jHueTableExtenderNavigator.appendTo($("body"));
  77. $(_this.element).find("tbody").click(function (event) {
  78. if ($.trim(getSelection()) == "") {
  79. window.setTimeout(function () {
  80. $(".rowSelected").removeClass("rowSelected");
  81. $(".columnSelected").removeClass("columnSelected");
  82. $(".cellSelected").removeClass("cellSelected");
  83. $(event.target.parentNode).addClass("rowSelected");
  84. $(event.target.parentNode).find("td").addClass("rowSelected");
  85. jHueTableExtenderNavigator
  86. .css("left", (event.clientX + jHueTableExtenderNavigator.width() > $(window).width() - 10 ? event.clientX - jHueTableExtenderNavigator.width() - 10 : event.clientX) + "px")
  87. .css("top", (event.clientY + 10) + "px").show();
  88. jHueTableExtenderNavigator.find("input").focus();
  89. }, 100);
  90. }
  91. });
  92. var source = [];
  93. $(_this.element).find("th").each(function () {
  94. source.push($(this).text());
  95. });
  96. jHueTableExtenderNavigator.find("input").typeahead({
  97. source:source,
  98. updater:function (item) {
  99. jHueTableExtenderNavigator.hide();
  100. $(_this.element).find("tr td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").addClass("columnSelected");
  101. if (_this.options.firstColumnTooltip) {
  102. $(_this.element).find("tr td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").each(function () {
  103. $(this).attr("rel", "tooltip").attr("title", "#" + $(this).parent().find("td:first-child").text()).tooltip({
  104. placement:'left'
  105. });
  106. });
  107. }
  108. $(_this.element).parent().animate({
  109. scrollLeft:$(_this.element).find("th:econtains(" + item + ")").position().left + $(_this.element).parent().scrollLeft() - $(_this.element).parent().offset().left - 30
  110. }, 300);
  111. $(_this.element).find("tr.rowSelected td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").addClass("cellSelected");
  112. }
  113. });
  114. $(_this.element).parent().bind("mouseleave", function () {
  115. jHueTableExtenderNavigator.hide();
  116. });
  117. jHueTableExtenderNavigator.bind("mouseenter", function (e) {
  118. jHueTableExtenderNavigator.show();
  119. });
  120. if (_this.options.hintElement != null) {
  121. var showAlertTimeout = -1;
  122. $(_this.element).find("tbody").mousemove(function () {
  123. window.clearTimeout(showAlertTimeout);
  124. if ($(_this.options.hintElement).data("show") == null || $(_this.options.hintElement).data("show")) {
  125. showAlertTimeout = window.setTimeout(function () {
  126. $(_this.options.hintElement).fadeIn();
  127. }, 1300);
  128. }
  129. });
  130. $(_this.options.hintElement).find(".close").click(function () {
  131. $(_this.options.hintElement).data("show", false);
  132. });
  133. }
  134. if (_this.options.fixedHeader) {
  135. drawHeader(_this);
  136. }
  137. };
  138. function drawHeader(_this) {
  139. $(".jHueTableExtenderClonedContainer").remove();
  140. var clonedTable = $(_this.element).clone();
  141. clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
  142. clonedTable.removeClass("resultTable").find("tbody").remove();
  143. $(_this.element).find("thead>tr th").each(function (i) {
  144. var originalTh = $(this);
  145. clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");
  146. clonedTable.find("thead>tr th:eq(" + i + ")").click(function () {
  147. originalTh.click();
  148. clonedTable.find("thead>tr th").attr("class", "sorting");
  149. $(this).attr("class", originalTh.attr("class"));
  150. });
  151. });
  152. var clonedTableContainer = $("<div>").width($(_this.element).outerWidth());
  153. clonedTable.appendTo(clonedTableContainer);
  154. var clonedTableVisibleContainer = $("<div>").addClass("jHueTableExtenderClonedContainer").width($(_this.element).parent().width()).css("overflow-x", "hidden");
  155. clonedTableVisibleContainer.css("position", "fixed");
  156. clonedTableContainer.appendTo(clonedTableVisibleContainer);
  157. clonedTableVisibleContainer.prependTo($(_this.element).parent());
  158. $(_this.element).parent().scroll(function () {
  159. clonedTableVisibleContainer.scrollLeft($(this).scrollLeft());
  160. });
  161. $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
  162. window.setInterval(function () {
  163. if ($(_this.element).parent().width() != $(_this.element).parent().data("w")) {
  164. clonedTableVisibleContainer.width($(_this.element).parent().width());
  165. $(_this.element).parent().data("w", clonedTableVisibleContainer.width());
  166. $(_this.element).find("thead>tr th").each(function (i) {
  167. clonedTable.find("thead>tr th:eq(" + i + ")").width($(this).width()).css("background-color", "#FFFFFF");
  168. });
  169. }
  170. }, 250);
  171. $(_this.element).parent().resize(function () {
  172. clonedTableVisibleContainer.width($(this).width());
  173. });
  174. }
  175. function getSelection() {
  176. var t = '';
  177. if (window.getSelection) {
  178. t = window.getSelection();
  179. } else if (document.getSelection) {
  180. t = document.getSelection();
  181. } else if (document.selection) {
  182. t = document.selection.createRange().text;
  183. }
  184. return t.toString();
  185. }
  186. $.fn[pluginName] = function (options) {
  187. return this.each(function () {
  188. if (!$.data(this, 'plugin_' + pluginName)) {
  189. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  190. }
  191. else {
  192. $.data(this, 'plugin_' + pluginName).resetSource();
  193. $.data(this, 'plugin_' + pluginName).setOptions(options);
  194. }
  195. });
  196. }
  197. })(jQuery, window, document);