jquery.tableextender.js 8.1 KB

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