bootstrap-table-toolbar.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. /**
  2. * @author: aperez <aperez@datadec.es>
  3. * @version: v2.0.0
  4. *
  5. * @update Dennis Hernández <http://djhvscf.github.io/Blog>
  6. */
  7. !function($) {
  8. 'use strict';
  9. var firstLoad = false;
  10. var sprintf = $.fn.bootstrapTable.utils.sprintf;
  11. var showAvdSearch = function(pColumns, searchTitle, searchText, that) {
  12. if (!$("#avdSearchModal" + "_" + that.options.idTable).hasClass("modal")) {
  13. var vModal = sprintf("<div id=\"avdSearchModal%s\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\" aria-hidden=\"true\">", "_" + that.options.idTable);
  14. vModal += "<div class=\"modal-dialog modal-xs\">";
  15. vModal += " <div class=\"modal-content\">";
  16. vModal += " <div class=\"modal-header\">";
  17. vModal += " <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\" >&times;</button>";
  18. vModal += sprintf(" <h4 class=\"modal-title\">%s</h4>", searchTitle);
  19. vModal += " </div>";
  20. vModal += " <div class=\"modal-body modal-body-custom\">";
  21. vModal += sprintf(" <div class=\"container-fluid\" id=\"avdSearchModalContent%s\" style=\"padding-right: 0px;padding-left: 0px;\" >", "_" + that.options.idTable);
  22. vModal += " </div>";
  23. vModal += " </div>";
  24. vModal += " </div>";
  25. vModal += " </div>";
  26. vModal += "</div>";
  27. $("body").append($(vModal));
  28. var vFormAvd = createFormAvd(pColumns, searchText, that),
  29. timeoutId = 0;;
  30. $('#avdSearchModalContent' + "_" + that.options.idTable).append(vFormAvd.join(''));
  31. $('#' + that.options.idForm).off('keyup blur', 'input').on('keyup blur', 'input', function (event) {
  32. clearTimeout(timeoutId);
  33. timeoutId = setTimeout(function () {
  34. that.onColumnAdvancedSearch(event);
  35. }, that.options.searchTimeOut);
  36. });
  37. $("#btnCloseAvd" + "_" + that.options.idTable).click(function() {
  38. $("#avdSearchModal" + "_" + that.options.idTable).modal('hide');
  39. });
  40. $("#avdSearchModal" + "_" + that.options.idTable).modal();
  41. } else {
  42. $("#avdSearchModal" + "_" + that.options.idTable).modal();
  43. }
  44. };
  45. var createFormAvd = function(pColumns, searchText, that) {
  46. var htmlForm = [];
  47. htmlForm.push(sprintf('<form class="form-horizontal" id="%s" action="%s" >', that.options.idForm, that.options.actionForm));
  48. for (var i in pColumns) {
  49. var vObjCol = pColumns[i];
  50. if (!vObjCol.checkbox && vObjCol.visible && vObjCol.searchable) {
  51. htmlForm.push('<div class="form-group">');
  52. htmlForm.push(sprintf('<label class="col-sm-4 control-label">%s</label>', vObjCol.title));
  53. htmlForm.push('<div class="col-sm-6">');
  54. htmlForm.push(sprintf('<input type="text" class="form-control input-md" name="%s" placeholder="%s" id="%s">', vObjCol.field, vObjCol.title, vObjCol.field));
  55. htmlForm.push('</div>');
  56. htmlForm.push('</div>');
  57. }
  58. }
  59. htmlForm.push('<div class="form-group">');
  60. htmlForm.push('<div class="col-sm-offset-9 col-sm-3">');
  61. htmlForm.push(sprintf('<button type="button" id="btnCloseAvd%s" class="btn btn-default" >%s</button>', "_" + that.options.idTable, searchText));
  62. htmlForm.push('</div>');
  63. htmlForm.push('</div>');
  64. htmlForm.push('</form>');
  65. return htmlForm;
  66. };
  67. $.extend($.fn.bootstrapTable.defaults, {
  68. advancedSearch: false,
  69. idForm: 'advancedSearch',
  70. actionForm: '',
  71. idTable: undefined,
  72. onColumnAdvancedSearch: function (field, text) {
  73. return false;
  74. }
  75. });
  76. $.extend($.fn.bootstrapTable.defaults.icons, {
  77. advancedSearchIcon: 'glyphicon-chevron-down'
  78. });
  79. $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
  80. 'column-advanced-search.bs.table': 'onColumnAdvancedSearch'
  81. });
  82. $.extend($.fn.bootstrapTable.locales, {
  83. formatAdvancedSearch: function() {
  84. return 'Advanced search';
  85. },
  86. formatAdvancedCloseButton: function() {
  87. return "Close";
  88. }
  89. });
  90. $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
  91. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  92. _initToolbar = BootstrapTable.prototype.initToolbar,
  93. _load = BootstrapTable.prototype.load,
  94. _initSearch = BootstrapTable.prototype.initSearch;
  95. BootstrapTable.prototype.initToolbar = function() {
  96. _initToolbar.apply(this, Array.prototype.slice.apply(arguments));
  97. if (!this.options.search) {
  98. return;
  99. }
  100. if (!this.options.advancedSearch) {
  101. return;
  102. }
  103. if (!this.options.idTable) {
  104. return;
  105. }
  106. var that = this,
  107. html = [];
  108. html.push(sprintf('<div class="columns columns-%s btn-group pull-%s" role="group">', this.options.buttonsAlign, this.options.buttonsAlign));
  109. html.push(sprintf('<button class="btn btn-default%s' + '" type="button" name="advancedSearch" title="%s">', that.options.iconSize === undefined ? '' : ' btn-' + that.options.iconSize, that.options.formatAdvancedSearch()));
  110. html.push(sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.advancedSearchIcon))
  111. html.push('</button></div>');
  112. that.$toolbar.prepend(html.join(''));
  113. that.$toolbar.find('button[name="advancedSearch"]')
  114. .off('click').on('click', function() {
  115. showAvdSearch(that.columns, that.options.formatAdvancedSearch(), that.options.formatAdvancedCloseButton(), that);
  116. });
  117. };
  118. BootstrapTable.prototype.load = function(data) {
  119. _load.apply(this, Array.prototype.slice.apply(arguments));
  120. if (!this.options.advancedSearch) {
  121. return;
  122. }
  123. if (typeof this.options.idTable === 'undefined') {
  124. return;
  125. } else {
  126. if (!firstLoad) {
  127. var height = parseInt($(".bootstrap-table").height());
  128. height += 10;
  129. $("#" + this.options.idTable).bootstrapTable("resetView", {height: height});
  130. firstLoad = true;
  131. }
  132. }
  133. };
  134. BootstrapTable.prototype.initSearch = function () {
  135. _initSearch.apply(this, Array.prototype.slice.apply(arguments));
  136. if (!this.options.advancedSearch) {
  137. return;
  138. }
  139. var that = this;
  140. var fp = $.isEmptyObject(this.filterColumnsPartial) ? null : this.filterColumnsPartial;
  141. this.data = fp ? $.grep(this.data, function (item, i) {
  142. for (var key in fp) {
  143. var fval = fp[key].toLowerCase();
  144. var value = item[key];
  145. value = $.fn.bootstrapTable.utils.calculateObjectValue(that.header,
  146. that.header.formatters[$.inArray(key, that.header.fields)],
  147. [value, item, i], value);
  148. if (!($.inArray(key, that.header.fields) !== -1 &&
  149. (typeof value === 'string' || typeof value === 'number') &&
  150. (value + '').toLowerCase().indexOf(fval) !== -1)) {
  151. return false;
  152. }
  153. }
  154. return true;
  155. }) : this.data;
  156. };
  157. BootstrapTable.prototype.onColumnAdvancedSearch = function (event) {
  158. var text = $.trim($(event.currentTarget).val());
  159. var $field = $(event.currentTarget)[0].id;
  160. if ($.isEmptyObject(this.filterColumnsPartial)) {
  161. this.filterColumnsPartial = {};
  162. }
  163. if (text) {
  164. this.filterColumnsPartial[$field] = text;
  165. } else {
  166. delete this.filterColumnsPartial[$field];
  167. }
  168. this.options.pageNumber = 1;
  169. this.onSearch(event);
  170. this.updatePagination();
  171. this.trigger('column-advanced-search', $field, text);
  172. };
  173. }(jQuery);