|
|
@@ -0,0 +1,245 @@
|
|
|
+/**
|
|
|
+ * @author: Dennis Hernández
|
|
|
+ * @webSite: http://djhvscf.github.io/Blog
|
|
|
+ * @version: v1.0.0
|
|
|
+ */
|
|
|
+
|
|
|
+!function ($) {
|
|
|
+
|
|
|
+ 'use strict';
|
|
|
+
|
|
|
+ var sprintf = function (str) {
|
|
|
+ var args = arguments,
|
|
|
+ flag = true,
|
|
|
+ i = 1;
|
|
|
+
|
|
|
+ str = str.replace(/%s/g, function () {
|
|
|
+ var arg = args[i++];
|
|
|
+
|
|
|
+ if (typeof arg === 'undefined') {
|
|
|
+ flag = false;
|
|
|
+ return '';
|
|
|
+ }
|
|
|
+ return arg;
|
|
|
+ });
|
|
|
+ return flag ? str : '';
|
|
|
+ };
|
|
|
+
|
|
|
+ var getFieldIndex = function (columns, field) {
|
|
|
+ var index = -1;
|
|
|
+
|
|
|
+ $.each(columns, function (i, column) {
|
|
|
+ if (column.field === field) {
|
|
|
+ index = i;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+ return index;
|
|
|
+ };
|
|
|
+
|
|
|
+ var calculateObjectValue = function (self, name, args, defaultValue) {
|
|
|
+ if (typeof name === 'string') {
|
|
|
+ // support obj.func1.func2
|
|
|
+ var names = name.split('.');
|
|
|
+
|
|
|
+ if (names.length > 1) {
|
|
|
+ name = window;
|
|
|
+ $.each(names, function (i, f) {
|
|
|
+ name = name[f];
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ name = window[name];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (typeof name === 'object') {
|
|
|
+ return name;
|
|
|
+ }
|
|
|
+ if (typeof name === 'function') {
|
|
|
+ return name.apply(self, args);
|
|
|
+ }
|
|
|
+ return defaultValue;
|
|
|
+ };
|
|
|
+
|
|
|
+ $.extend($.fn.bootstrapTable.defaults, {
|
|
|
+ filterControl: false,
|
|
|
+ onColumnSearch: function (field, text) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ $.extend($.fn.bootstrapTable.COLUMN_DEFAULTS, {
|
|
|
+ filterControl: undefined
|
|
|
+ });
|
|
|
+
|
|
|
+ $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
|
|
|
+ 'column-search.bs.table': 'onColumnSearch'
|
|
|
+ });
|
|
|
+
|
|
|
+ var BootstrapTable = $.fn.bootstrapTable.Constructor,
|
|
|
+ _initHeader = BootstrapTable.prototype.initHeader,
|
|
|
+ _initBody = BootstrapTable.prototype.initBody,
|
|
|
+ _initSearch = BootstrapTable.prototype.initSearch;
|
|
|
+
|
|
|
+ BootstrapTable.prototype.initHeader = function () {
|
|
|
+ _initHeader.apply(this, Array.prototype.slice.apply(arguments));
|
|
|
+
|
|
|
+ if (!this.options.filterControl) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var addedFilterControl = false,
|
|
|
+ that = this,
|
|
|
+ isVisible,
|
|
|
+ html,
|
|
|
+ timeoutId = 0;
|
|
|
+
|
|
|
+ $.each(this.options.columns, function (i, column) {
|
|
|
+ isVisible = 'hidden';
|
|
|
+ html = [];
|
|
|
+
|
|
|
+ if (!column.filterControl) {
|
|
|
+ html.push('<div style="height: 34px;"></div>');
|
|
|
+ } else {
|
|
|
+ html.push('<div style="margin: 0px 2px 2px 2px;" class="filterControl">');
|
|
|
+
|
|
|
+ if (column.filterControl && column.searchable) {
|
|
|
+ addedFilterControl = true;
|
|
|
+ isVisible = 'visible'
|
|
|
+ }
|
|
|
+ switch (column.filterControl.toLowerCase()) {
|
|
|
+ case 'input' :
|
|
|
+ html.push(sprintf('<input type="text" class="form-control" style="width: 100%; visibility: %s">', isVisible));
|
|
|
+ break;
|
|
|
+ case 'select':
|
|
|
+ html.push(sprintf('<select class="%s form-control" style="width: 100%; visibility: %s"></select>',
|
|
|
+ column.field, isVisible))
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ that.$header.find(sprintf('.th-inner:contains("%s")', column.title)).next().append(html.join(''));
|
|
|
+ });
|
|
|
+
|
|
|
+ if (addedFilterControl) {
|
|
|
+ this.$header.off('keyup', 'input').on('keyup', 'input', function (event) {
|
|
|
+ clearTimeout(timeoutId);
|
|
|
+ timeoutId = setTimeout(function () {
|
|
|
+ that.onColumnSearch(event);
|
|
|
+ }, that.options.searchTimeOut);
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$header.off('change', 'select').on('change', 'select', function (event) {
|
|
|
+ clearTimeout(timeoutId);
|
|
|
+ timeoutId = setTimeout(function () {
|
|
|
+ that.onColumnSearch(event);
|
|
|
+ }, that.options.searchTimeOut);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$header.find('.filterControl').hide();
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ BootstrapTable.prototype.initBody = function () {
|
|
|
+ _initBody.apply(this, Array.prototype.slice.apply(arguments));
|
|
|
+
|
|
|
+ var that = this,
|
|
|
+ data = this.getData();
|
|
|
+
|
|
|
+ for (var i = this.pageFrom - 1; i < this.pageTo; i++) {
|
|
|
+ var key,
|
|
|
+ item = data[i];
|
|
|
+
|
|
|
+ $.each(this.header.fields, function (j, field) {
|
|
|
+ var value = item[field],
|
|
|
+ column = that.options.columns[getFieldIndex(that.options.columns, field)];
|
|
|
+
|
|
|
+ value = calculateObjectValue(that.header,
|
|
|
+ that.header.formatters[j], [value, item, i], value);
|
|
|
+
|
|
|
+ if ((!column.checkbox) || (!column.radio)) {
|
|
|
+ if (column.filterControl !== undefined && column.filterControl.toLowerCase() === 'select'
|
|
|
+ && column.searchable) {
|
|
|
+
|
|
|
+ var selectControl = $('.' + column.field),
|
|
|
+ iOpt = 0,
|
|
|
+ exitsOpt = false,
|
|
|
+ options;
|
|
|
+ if (selectControl !== undefined) {
|
|
|
+ options = selectControl.get(0).options;
|
|
|
+
|
|
|
+ if (options.length === 0) {
|
|
|
+
|
|
|
+ //Added the default option
|
|
|
+ selectControl.append($("<option></option>")
|
|
|
+ .attr("value", '')
|
|
|
+ .text(''));
|
|
|
+
|
|
|
+ selectControl.append($("<option></option>")
|
|
|
+ .attr("value", value)
|
|
|
+ .text(value));
|
|
|
+ } else {
|
|
|
+ for (; iOpt < options.length; iOpt++) {
|
|
|
+ if (options[iOpt].value === value) {
|
|
|
+ exitsOpt = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!exitsOpt) {
|
|
|
+ selectControl.append($("<option></option>")
|
|
|
+ .attr("value", value)
|
|
|
+ .text(value));
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ BootstrapTable.prototype.initSearch = function () {
|
|
|
+ _initSearch.apply(this, Array.prototype.slice.apply(arguments));
|
|
|
+
|
|
|
+ var that = this;
|
|
|
+ var fp = $.isEmptyObject(this.filterColumnsPartial) ? null : this.filterColumnsPartial;
|
|
|
+
|
|
|
+ //Check partial column filter
|
|
|
+ this.data = fp ? $.grep(this.data, function (item, i) {
|
|
|
+ for (var key in fp) {
|
|
|
+ var fval = fp[key].toLowerCase();
|
|
|
+ var value = item[key];
|
|
|
+ value = calculateObjectValue(that.header,
|
|
|
+ that.header.formatters[$.inArray(key, that.header.fields)],
|
|
|
+ [value, item, i], value);
|
|
|
+
|
|
|
+ if (!($.inArray(key, that.header.fields) !== -1 &&
|
|
|
+ (typeof value === 'string' || typeof value === 'number') &&
|
|
|
+ (value + '').toLowerCase().indexOf(fval) !== -1)) {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return true;
|
|
|
+ }) : this.data;
|
|
|
+ };
|
|
|
+
|
|
|
+ BootstrapTable.prototype.onColumnSearch = function (event) {
|
|
|
+ var text = $.trim($(event.currentTarget).val());
|
|
|
+ var $field = $(event.currentTarget).parent().parent().parent().data('field')
|
|
|
+
|
|
|
+ if ($.isEmptyObject(this.filterColumnsPartial)) {
|
|
|
+ this.filterColumnsPartial = {};
|
|
|
+ }
|
|
|
+ if (text) {
|
|
|
+ this.filterColumnsPartial[$field] = text;
|
|
|
+ } else {
|
|
|
+ delete this.filterColumnsPartial[$field];
|
|
|
+ }
|
|
|
+
|
|
|
+ this.options.pageNumber = 1;
|
|
|
+ this.onSearch(event);
|
|
|
+ this.updatePagination();
|
|
|
+ this.trigger('column-search', $field, text);
|
|
|
+ };
|
|
|
+}(jQuery);
|
Dennis Hernández