jquery.tableextender.js 9.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  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. includeNavigator: true,
  28. labels:{
  29. GO_TO_COLUMN:"Go to column:",
  30. PLACEHOLDER:"column name..."
  31. }
  32. };
  33. function Plugin(element, options) {
  34. this.element = element;
  35. if (typeof jHueTableExtenderGlobals != 'undefined') {
  36. var extendedDefaults = $.extend({}, defaults, jHueFileChooserGlobals);
  37. extendedDefaults.labels = $.extend({}, defaults.labels, jHueFileChooserGlobals.labels);
  38. this.options = $.extend({}, extendedDefaults, options);
  39. if (options != null) {
  40. this.options.labels = $.extend({}, extendedDefaults.labels, options.labels);
  41. }
  42. }
  43. else {
  44. this.options = $.extend({}, defaults, options);
  45. if (options != null) {
  46. this.options.labels = $.extend({}, defaults.labels, options.labels);
  47. }
  48. }
  49. this._defaults = defaults;
  50. this._name = pluginName;
  51. this.previousPath = "";
  52. this.init();
  53. }
  54. Plugin.prototype.setOptions = function (options) {
  55. this.options = $.extend({}, defaults, options);
  56. drawHeader(this);
  57. };
  58. Plugin.prototype.resetSource = function() {
  59. var _this = this;
  60. if (_this.options.includeNavigator){
  61. var source = [];
  62. $(this.element).find("th").each(function () {
  63. source.push($(this).text());
  64. });
  65. $("#jHueTableExtenderNavigator").find("input").data('typeahead').source = source;
  66. }
  67. };
  68. Plugin.prototype.init = function () {
  69. $.expr[":"].econtains = function (obj, index, meta, stack) {
  70. return (obj.textContent || obj.innerText || $(obj).text() || "").toLowerCase() == meta[3].toLowerCase();
  71. }
  72. var _this = this;
  73. if (_this.options.includeNavigator){
  74. var jHueTableExtenderNavigator = $("<div>").attr("id", "jHueTableExtenderNavigator");
  75. $("<a>").attr("href", "#").addClass("pull-right").html("&times;").click(function (e) {
  76. e.preventDefault();
  77. $(this).parent().hide();
  78. }).appendTo(jHueTableExtenderNavigator);
  79. $("<label>").html(_this.options.labels.GO_TO_COLUMN + " <input type=\"text\" placeholder=\"" + _this.options.labels.PLACEHOLDER + "\" />").appendTo(jHueTableExtenderNavigator);
  80. jHueTableExtenderNavigator.appendTo($("body"));
  81. $(_this.element).find("tbody").click(function (event) {
  82. if ($.trim(getSelection()) == "") {
  83. window.setTimeout(function () {
  84. $(".rowSelected").removeClass("rowSelected");
  85. $(".columnSelected").removeClass("columnSelected");
  86. $(".cellSelected").removeClass("cellSelected");
  87. $(event.target.parentNode).addClass("rowSelected");
  88. $(event.target.parentNode).find("td").addClass("rowSelected");
  89. jHueTableExtenderNavigator
  90. .css("left", (event.pageX + jHueTableExtenderNavigator.width() > $(window).width() - 10 ? event.pageX - jHueTableExtenderNavigator.width() - 10 : event.pageX) + "px")
  91. .css("top", (event.pageY + 10) + "px").show();
  92. jHueTableExtenderNavigator.find("input").focus();
  93. }, 100);
  94. }
  95. });
  96. var source = [];
  97. $(_this.element).find("th").each(function () {
  98. source.push($(this).text());
  99. });
  100. jHueTableExtenderNavigator.find("input").typeahead({
  101. source:source,
  102. updater:function (item) {
  103. jHueTableExtenderNavigator.hide();
  104. $(_this.element).find("tr td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").addClass("columnSelected");
  105. if (_this.options.firstColumnTooltip) {
  106. $(_this.element).find("tr td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").each(function () {
  107. $(this).attr("rel", "tooltip").attr("title", "#" + $(this).parent().find("td:first-child").text()).tooltip({
  108. placement:'left'
  109. });
  110. });
  111. }
  112. $(_this.element).parent().animate({
  113. scrollLeft:$(_this.element).find("th:econtains(" + item + ")").position().left + $(_this.element).parent().scrollLeft() - $(_this.element).parent().offset().left - 30
  114. }, 300);
  115. $(_this.element).find("tr.rowSelected td:nth-child(" + ($(_this.element).find("th:econtains(" + item + ")").index() + 1) + ")").addClass("cellSelected");
  116. }
  117. });
  118. $(_this.element).parent().bind("mouseleave", function () {
  119. jHueTableExtenderNavigator.hide();
  120. });
  121. jHueTableExtenderNavigator.bind("mouseenter", function (e) {
  122. jHueTableExtenderNavigator.show();
  123. });
  124. }
  125. if (_this.options.hintElement != null) {
  126. var showAlertTimeout = -1;
  127. $(_this.element).find("tbody").mousemove(function () {
  128. window.clearTimeout(showAlertTimeout);
  129. if ($(_this.options.hintElement).data("show") == null || $(_this.options.hintElement).data("show")) {
  130. showAlertTimeout = window.setTimeout(function () {
  131. $(_this.options.hintElement).fadeIn();
  132. }, 1300);
  133. }
  134. });
  135. $(_this.options.hintElement).find(".close").click(function () {
  136. $(_this.options.hintElement).data("show", false);
  137. });
  138. }
  139. if (_this.options.fixedHeader) {
  140. drawHeader(_this);
  141. }
  142. };
  143. function s4() {
  144. return Math.floor((1 + Math.random()) * 0x10000)
  145. .toString(16)
  146. .substring(1);
  147. }
  148. function UUID() {
  149. return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
  150. }
  151. function drawHeader(plugin) {
  152. if (!$(plugin.element).attr("id")){
  153. $(plugin.element).attr("id", "eT" + UUID());
  154. }
  155. $("#" + $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").remove();
  156. var clonedTable = $(plugin.element).clone();
  157. clonedTable.css("margin-bottom", "0").css("table-layout", "fixed");
  158. clonedTable.removeAttr("id").removeClass("resultTable").find("tbody").remove();
  159. $(plugin.element).find("thead>tr th").each(function (i) {
  160. var originalTh = $(this);
  161. clonedTable.find("thead>tr th:eq(" + i + ")").width(originalTh.width()).css("background-color", "#FFFFFF");
  162. clonedTable.find("thead>tr th:eq(" + i + ")").click(function () {
  163. originalTh.click();
  164. clonedTable.find("thead>tr th").attr("class", "sorting");
  165. $(this).attr("class", originalTh.attr("class"));
  166. });
  167. });
  168. var clonedTableContainer = $("<div>").width($(plugin.element).outerWidth());
  169. clonedTable.appendTo(clonedTableContainer);
  170. var clonedTableVisibleContainer = $("<div>").attr("id", $(plugin.element).attr("id") + "jHueTableExtenderClonedContainer").addClass("jHueTableExtenderClonedContainer").width($(plugin.element).parent().width()).css("overflow-x", "hidden").css("top", ($(plugin.element).parent().offset().top - $(window).scrollTop()) + "px");
  171. clonedTableVisibleContainer.css("position", "fixed");
  172. clonedTableContainer.appendTo(clonedTableVisibleContainer);
  173. clonedTableVisibleContainer.prependTo($(plugin.element).parent());
  174. $(plugin.element).parent().scroll(function () {
  175. clonedTableVisibleContainer.scrollLeft($(this).scrollLeft());
  176. });
  177. $(plugin.element).parent().data("w", clonedTableVisibleContainer.width());
  178. window.setInterval(function () {
  179. if ($(plugin.element).parent().width() != $(plugin.element).parent().data("w")) {
  180. clonedTableVisibleContainer.width($(plugin.element).parent().width());
  181. $(plugin.element).parent().data("w", clonedTableVisibleContainer.width());
  182. $(plugin.element).find("thead>tr th").each(function (i) {
  183. clonedTable.find("thead>tr th:eq(" + i + ")").width($(this).width()).css("background-color", "#FFFFFF");
  184. });
  185. }
  186. }, 250);
  187. $(plugin.element).parent().resize(function () {
  188. clonedTableVisibleContainer.width($(this).width());
  189. });
  190. $(window).scroll(function () {
  191. clonedTableVisibleContainer.css("top", ($(plugin.element).parent().offset().top - $(window).scrollTop()) + "px");
  192. });
  193. }
  194. function getSelection() {
  195. var t = '';
  196. if (window.getSelection) {
  197. t = window.getSelection();
  198. } else if (document.getSelection) {
  199. t = document.getSelection();
  200. } else if (document.selection) {
  201. t = document.selection.createRange().text;
  202. }
  203. return t.toString();
  204. }
  205. $.fn[pluginName] = function (options) {
  206. return this.each(function () {
  207. if (!$.data(this, 'plugin_' + pluginName)) {
  208. $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
  209. }
  210. else {
  211. $.data(this, 'plugin_' + pluginName).resetSource();
  212. $.data(this, 'plugin_' + pluginName).setOptions(options);
  213. }
  214. });
  215. }
  216. })(jQuery, window, document);