bootstrap-table-toolbar.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. /**
  2. * @author aperez <aperez@datadec.es>
  3. * Añade los iconos de buscador y buscador avanzado detrás del campo search.
  4. */
  5. ! function($) {
  6. 'use strict';
  7. var firstLoad = false;
  8. var firstBody = false;
  9. var sprintf = function(str) {
  10. var args = arguments,
  11. flag = true,
  12. i = 1;
  13. str = str.replace(/%s/g, function() {
  14. var arg = args[i++];
  15. if (typeof arg === 'undefined') {
  16. flag = false;
  17. return '';
  18. }
  19. return arg;
  20. });
  21. return flag ? str : '';
  22. };
  23. var showAvdSearch = function(pColumns, pObjSearch) {
  24. if (!$("#avdSearchModal").hasClass("modal")) {
  25. var vModal = "<div id=\"avdSearchModal\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"mySmallModalLabel\" aria-hidden=\"true\">";
  26. vModal += "<div class=\"modal-dialog modal-xs\">";
  27. vModal += " <div class=\"modal-content\">";
  28. vModal += " <div class=\"modal-header\">";
  29. vModal += " <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-hidden=\"true\" >&times;</button>";
  30. vModal += " <h4 class=\"modal-title\">Buscador Avanzado</h4>";
  31. vModal += " </div>";
  32. vModal += " <div class=\"modal-body modal-body-custom\">";
  33. vModal += " <div class=\"container-fluid\" id=\"avdSearchModalContent\" style=\"padding-right: 0px;padding-left: 0px;\" >";
  34. vModal += " </div>";
  35. vModal += " </div>";
  36. vModal += " </div>";
  37. vModal += " </div>";
  38. vModal += "</div>";
  39. $("body").append($(vModal));
  40. var vFormAvd = createFormAvd(pColumns, pObjSearch);
  41. $('#avdSearchModalContent').append(vFormAvd.join(''));
  42. //
  43. $("#btnSearchAvd").click(function() {
  44. var vFormData = $("#" + pObjSearch.idForm).serializeJSON();
  45. var vText = $('#' + pObjSearch.idTable).parents('.bootstrap-table').find('.search input').val();
  46. $.extend(vFormData, {
  47. searchText: vText
  48. });
  49. var sFunctionData = JSON.stringify(vFormData);
  50. BootstrapTable.DEFAULTS.searchText = sFunctionData;
  51. //BootstrapTable.prototype.onSearch(this,$.Event('keyup'));
  52. /*********************
  53. * Here, I want to call the method onSearch.
  54. ***********************/
  55. });
  56. $("#avdSearchModal").modal();
  57. } else {
  58. $("#avdSearchModal").modal();
  59. }
  60. };
  61. var createFormAvd = function(pColumns, pObjSearch) {
  62. var htmlForm = [];
  63. htmlForm.push('<form class="form-horizontal" id="' + pObjSearch.idForm + '" action="' + pObjSearch.actionForm + '" >');
  64. for (var i in pColumns) {
  65. var vObjCol = pColumns[i];
  66. if (!vObjCol.checkbox && vObjCol.visible && vObjCol.searchable) {
  67. htmlForm.push('<div class="form-group">',
  68. '<label class="col-sm-4 control-label">' + vObjCol.title + '</label>',
  69. '<div class="col-sm-6">',
  70. '<input type = "text" class="form-control input-md" name="' + vObjCol.field + '" placeholder="Email">',
  71. '</div>',
  72. '</div>');
  73. }
  74. }
  75. htmlForm.push('<div class="form-group">',
  76. '<div class="col-sm-offset-9 col-sm-3">',
  77. '<button type="button" id="btnSearchAvd" class="btn btn-default" >Buscar</button>',
  78. '</div>',
  79. '</div>',
  80. '</form>');
  81. return htmlForm;
  82. }
  83. $.extend($.fn.bootstrapTable.defaults, {
  84. advancedSearch: undefined,
  85. idTable: undefined
  86. });
  87. $.extend($.fn.bootstrapTable.defaults.icons, {
  88. avdSearch: 'glyphicon-chevron-down'
  89. });
  90. $.extend($.fn.bootstrapTable.locales, {
  91. formatAvancedSearch: function() {
  92. return 'Buscador Avanzado';
  93. }
  94. });
  95. $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
  96. var BootstrapTable = $.fn.bootstrapTable.Constructor,
  97. _initToolbar = BootstrapTable.prototype.initToolbar,
  98. _load = BootstrapTable.prototype.load;
  99. BootstrapTable.prototype.initToolbar = function() {
  100. var that = this,
  101. htmlBtns = [],
  102. $search,
  103. advSearch = {
  104. active: false,
  105. idTable: '',
  106. idForm: '',
  107. actionForm: ''
  108. };
  109. _initToolbar.apply(this, Array.prototype.slice.apply(arguments));
  110. if (typeof this.options.advancedSearch !== 'undefined') {
  111. advSearch = this.options.advancedSearch;
  112. }
  113. if (advSearch.active) {
  114. htmlBtns.push(sprintf('<div class="btn-group" role="group"><button class="btn btn-default' + (that.options.iconSize === undefined ? '' : ' btn-' + that.options.iconSize) + '" type="button" name="avdSearch" title="%s">',
  115. that.options.formatAvancedSearch()),
  116. sprintf('<i class="%s %s"></i>', that.options.iconsPrefix, that.options.icons.avdSearch),
  117. '</button></div>');
  118. // Añadimos el botón al toolbar.
  119. that.$toolbar.find('.columns').prepend(htmlBtns.join(''));
  120. // Creamos el onclick para el booton
  121. that.$toolbar.find('button[name="avdSearch"]')
  122. .off('click').on('click', function() {
  123. showAvdSearch(that.options.columns, advSearch);
  124. });
  125. }
  126. // Anulamos la búsqueda automática
  127. if (that.options.searchTimeOut === -1) {
  128. $search = that.$toolbar.find('.search input');
  129. $search.off('keyup').on('keyup', function(event) {
  130. var text = $.trim($(event.currentTarget).val());
  131. // Al pulsar Enter realizamos la búsqueda.
  132. if (event.which === 13) {
  133. that.onSearch(event);
  134. }
  135. });
  136. }
  137. };
  138. BootstrapTable.prototype.load = function(data) {
  139. _load.apply(this, Array.prototype.slice.apply(arguments));
  140. if (typeof this.options.idTable === 'undefined') {
  141. alert('Error: La propiedad "idTable" de bootstrapTable debe tener el id definido en la tabla.');
  142. } else {
  143. if (!firstLoad) {
  144. var vTam = parseInt($(".bootstrap-table").height());
  145. vTam += 10;
  146. $("#" + this.options.idTable).bootstrapTable("resetView", {height: vTam});
  147. firstLoad = true;
  148. }
  149. }
  150. };
  151. }(jQuery);