jquery.jqgrid.showhidecolumnmenu.js 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
  1. /**
  2. * @license Copyright (c) 2014-2018, Oleg Kiriljuk, oleg.kiriljuk@ok-soft-gmbh.com
  3. * Dual licensed under the MIT and GPL licenses
  4. * http://www.opensource.org/licenses/mit-license.php
  5. * http://www.gnu.org/licenses/gpl-2.0.html
  6. * Date: 2014-11-13, 2015-04-06
  7. * see https://github.com/tonytomov/jqGrid/issues/650 for more details
  8. */
  9. /*global jQuery, define, module, require */
  10. (function (global, factory) {
  11. "use strict";
  12. if (typeof define === "function" && define.amd) {
  13. // AMD. Register as an anonymous module.
  14. define([
  15. "jquery",
  16. "./jquery.contextmenu-ui",
  17. "free-jqgrid/grid.base"
  18. ], function ($) {
  19. return factory($, global, global.document);
  20. });
  21. } else if (typeof module === "object" && module.exports) {
  22. // Node/CommonJS
  23. module.exports = function (root, $) {
  24. if ($ === undefined) {
  25. // require("jquery") returns a factory that requires window to
  26. // build a jQuery instance, we normalize how we use modules
  27. // that require this pattern but the window provided is a noop
  28. // if it's defined (how jquery works)
  29. $ = typeof window !== "undefined" ?
  30. require("jquery") :
  31. require("jquery")(root || window);
  32. }
  33. require("./jquery.contextmenu-ui");
  34. require("free-jqgrid/grid.base");
  35. factory($, root, root.document);
  36. return $;
  37. };
  38. } else {
  39. // Browser globals
  40. factory(jQuery, global, global.document);
  41. }
  42. }(typeof window !== "undefined" ? window : this, function ($, window, document) {
  43. "use strict";
  44. $.jgrid = $.jgrid || {};
  45. $.extend($.jgrid, {
  46. // define default options of showHideColumnMenu plugin
  47. showHideColumnMenu: {
  48. adjustGridWidth: true,
  49. viewHideDlgColumnsAsDisabled: false,
  50. allowHideInernalColumns: false,
  51. shrink: false,
  52. menuStyle: { "float": "left" },
  53. modifyMenuItem: function ($li, cm, options) {
  54. if ($.inArray(cm.name, ["rn", "subgrid", "cb"]) >= 0) { // skip predefined columns
  55. if (!options.allowHideInernalColumns) {
  56. $li.hide();
  57. }
  58. return;
  59. }
  60. if (!cm.hidedlg) {
  61. return;
  62. }
  63. if (options.viewHideDlgColumnsAsDisabled) {
  64. $li.addClass("ui-state-disabled");
  65. } else {
  66. $li.hide();
  67. }
  68. }
  69. }
  70. });
  71. /*jslint continue: true, eqeq: true, unparam: true, plusplus: true */
  72. $.jgrid.extend({
  73. showHideColumnMenu: function (opt) {
  74. var options = $.extend(true, {}, $.jgrid.showHideColumnMenu, opt),
  75. versionParts = $.ui != null && typeof $.ui.version === "string" ? /^([0-9]+)\.([0-9]+)\.([0-9]+)$/.exec($.ui.version) : [],
  76. isAncorRequired = versionParts != null && versionParts.length === 4 && versionParts[1] === "1" && versionParts[2] < 11;
  77. return this.each(function () {
  78. var $self = $(this),
  79. bindContextMenu = function () {
  80. $(this.grid.hDiv).find(".ui-jqgrid-labels").contextmenu(function (e) {
  81. var p = $self.jqGrid("getGridParam"), colModel = p.colModel, colNames = p.colNames, iCol, nCol = colModel.length, cm, $li,
  82. gh = p.groupHeader, iColByName = {}, colHeader = {}, i, j, l, ghItem,
  83. $menu = $("<ul class='ui-jqgrid-showHideColumnMenu'></ul>");
  84. // first fill the helper map which get iCol by the column name
  85. for (iCol = 0; iCol < nCol; iCol++) {
  86. iColByName[colModel[iCol].name] = iCol;
  87. }
  88. // fill colHeader for columns which have column header
  89. if (gh != null && gh.groupHeaders != null) {
  90. for (i = 0, l = gh.groupHeaders.length; i < l; i++) {
  91. ghItem = gh.groupHeaders[i];
  92. for (j = 0; j < ghItem.numberOfColumns; j++) {
  93. iCol = iColByName[ghItem.startColumnName] + j;
  94. cm = colModel[iCol];
  95. colHeader[iCol] = $.isFunction(options.buildItemText) ?
  96. options.buildItemText.call($self[0], {
  97. iCol: iCol,
  98. cm: cm,
  99. cmName: cm.name,
  100. colName: colNames[iCol],
  101. groupTitleText: ghItem.titleText
  102. }) :
  103. $.jgrid.stripHtml(ghItem.titleText) + ": " +
  104. $.jgrid.stripHtml(colNames[iCol] === "" ? cm.name : colNames[iCol]);
  105. }
  106. }
  107. }
  108. // fill colHeader for all other columns
  109. for (iCol = 0; iCol < nCol; iCol++) {
  110. if (colHeader[iCol] === undefined) {
  111. cm = colModel[iCol];
  112. colHeader[iCol] = $.isFunction(options.buildItemText) ?
  113. options.buildItemText.call($self[0], {
  114. iCol: iCol,
  115. cm: cm,
  116. cmName: cm.name,
  117. colName: colNames[iCol],
  118. groupTitleText: null
  119. }) :
  120. $.jgrid.stripHtml(colNames[iCol]);
  121. }
  122. }
  123. // fill the menu items now
  124. for (iCol = 0; iCol < nCol; iCol++) {
  125. cm = colModel[iCol];
  126. $li = $("<li></li>")
  127. .data("iCol", iCol)
  128. .html(colHeader[iCol]);
  129. options.modifyMenuItem.call($self[0], $li, cm, options);
  130. $li.prepend(cm.hidden ? options.checkboxUnChecked : options.checkboxChecked);
  131. if (isAncorRequired) {
  132. $li.wrapInner("<a></a>");
  133. }
  134. $li.appendTo($menu);
  135. }
  136. $menu.css(options.menuStyle);
  137. $("ul.ui-jqgrid-showHideColumnMenu").menu("destroy").remove(); // remove menu if any exist
  138. $menu.appendTo("body")
  139. .menu({
  140. select: function (event, ui) {
  141. var index = parseInt(ui.item.data("iCol"), 10), $cb = ui.item.find(options.checkboxSelector),
  142. cmi = colModel[index],
  143. toHide = options.isChecked.call($self[0], $cb, event, cmi);
  144. if (!isNaN(index) && index >= 0 && cmi != null && $cb.length > 0) {
  145. if (toHide) {
  146. options.toUnCheck.call($self[0], $cb, event, cmi);
  147. $self.jqGrid("hideCol", cmi.name);
  148. } else {
  149. options.toCheck.call($self[0], $cb, event, cmi);
  150. $self.jqGrid("showCol", cmi.name);
  151. }
  152. $(this).parent().css("zoom", 1); // fix visibility in IE
  153. $menu.menu("focus", event, ui.item);
  154. }
  155. },
  156. create: function () {
  157. var mHeight = $menu.height(),
  158. wHeight = window.innerHeight || document.documentElement.clientHeight;
  159. if (mHeight > wHeight) {
  160. $menu.height(wHeight).css("overflow-y", "scroll");
  161. }
  162. }
  163. })
  164. .mouseleave(function () {
  165. $(this).menu("destroy").remove();
  166. })
  167. .position({
  168. of: $(e.target),
  169. my: "left top",
  170. at: "right center",
  171. collision: "flipfit flipfit"
  172. });
  173. return false; // prevent creating of the standard context menu of web browser
  174. });
  175. };
  176. options = $.extend(true,
  177. (this.p.iconSet === "fontAwesome" || options.iconSet === "fontAwesome") ? {
  178. checkboxChecked: "<i class=\"fa fa-check-square-o fa-fw fa-lg\"></i>&nbsp;",
  179. checkboxUnChecked: "<i class=\"fa fa-square-o fa-fw fa-lg\"></i>&nbsp;",
  180. checkboxSelector: "i.fa",
  181. isChecked: function ($checkbox) { return $checkbox.hasClass("fa-check-square-o"); },
  182. toCheck: function ($checkbox) { $checkbox.removeClass("fa-square-o").addClass("fa-check-square-o"); },
  183. toUnCheck: function ($checkbox) { $checkbox.removeClass("fa-check-square-o").addClass("fa-square-o"); }
  184. } : {
  185. checkboxChecked: "<input disabled=\"disabled\" checked=\"checked\" type=\"checkbox\"/>",
  186. checkboxUnChecked: "<input disabled=\"disabled\" type=\"checkbox\"/>",
  187. checkboxSelector: "input[type=checkbox]",
  188. isChecked: function ($checkbox) { return $checkbox.is(":checked"); },
  189. toCheck: function ($checkbox) { $checkbox.prop("checked", true); },
  190. toUnCheck: function ($checkbox) { $checkbox.prop("checked", false); }
  191. },
  192. options);
  193. bindContextMenu.call(this);
  194. $self.bind("jqGridAfterSetGroupHeaders", function () {
  195. bindContextMenu.call(this);
  196. });
  197. });
  198. }
  199. });
  200. }));