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