/** * @author: Jewway * @version: v1.0.0 */ !function ($) { 'use strict'; function getCurrentHeader(that) { var header = that.$header; if (that.options.height) { header = that.$tableHeader; } return header; } function getFilterFields(that) { return getCurrentHeader(that).find('[data-filter-field]'); } function setFilterValues(that) { var $filterElms = getFilterFields(that); if (!$.isEmptyObject(that.filterColumnsPartial)) { $filterElms.each(function (index, ele) { var $ele = $(ele), field = $ele.attr('data-filter-field'), value = that.filterColumnsPartial[field]; if ($ele.is("select")) { $ele.val(value).trigger('change'); } else { $ele.val(value); } }); } } function createFilter(that, header) { var enableFilter = false, isVisible, html, timeoutId = 0; $.each(that.columns, function (i, column) { isVisible = 'hidden'; html = []; if (!column.visible) { return; } if (!column.filter) { html.push('
'); } else { var filterClass = column.filter.class ? ' ' + column.filter.class : ''; html.push('
'); if (column.searchable) { enableFilter = true; isVisible = 'visible' } switch (column.filter.type.toLowerCase()) { case 'input' : html.push(''); break; case 'select': html.push(''); break; } } $.each(header.children().children(), function (i, tr) { tr = $(tr); if (tr.data('field') === column.field) { tr.find('.fht-cell').append(html.join('')); return false; } }); }); if (enableFilter) { var $inputs = header.find('input'), $selects = header.find('select'); if ($inputs.length > 0) { $inputs.off('keyup').on('keyup', function (event) { clearTimeout(timeoutId); timeoutId = setTimeout(function () { that.onColumnSearch(event); }, that.options.searchTimeOut); }); $inputs.off('mouseup').on('mouseup', function (event) { var $input = $(this), oldValue = $input.val(); if (oldValue === "") { return; } setTimeout(function () { var newValue = $input.val(); if (newValue === "") { clearTimeout(timeoutId); timeoutId = setTimeout(function () { that.onColumnSearch(event); }, that.options.searchTimeOut); } }, 1); }); } if ($selects.length > 0) { $selects.on('select2:select', function (event) { that.onColumnSearch(event); }); } } else { header.find('.filter').hide(); } } function initSelect2(that) { var $header = getCurrentHeader(that); $.each(that.columns, function (idx, column) { if (column.filter && column.filter.type === 'select') { var $selectEle = $header.find('select[data-filter-field=' + column.field + ']'); if ($selectEle.length > 0 && !$selectEle.data().select2) { column.filter.data.unshift(""); var select2Opts = { placeholder: "", allowClear: true, data: column.filter.data, dropdownParent: that.$el.closest(".bootstrap-table") }; $selectEle.select2(select2Opts); $selectEle.on("select2:unselecting", function (event) { event.preventDefault(); $selectEle.val(null).trigger('change'); that.searchText = undefined; that.onColumnSearch(event); }); } } }); } $.extend($.fn.bootstrapTable.defaults, { filter: false, filterValues: {} }); $.extend($.fn.bootstrapTable.COLUMN_DEFAULTS, { filter: undefined }); var BootstrapTable = $.fn.bootstrapTable.Constructor, _init = BootstrapTable.prototype.init, _initHeader = BootstrapTable.prototype.initHeader, _initSearch = BootstrapTable.prototype.initSearch; BootstrapTable.prototype.init = function () { //Make sure that the filtercontrol option is set if (this.options.filter) { var that = this; if (!$.isEmptyObject(that.options.filterValues)) { that.filterColumnsPartial = that.options.filterValues; that.options.filterValues = {}; } this.$el.on('reset-view.bs.table', function () { //Create controls on $tableHeader if the height is set if (!that.options.height) { return; } //Avoid recreate the controls if (that.$tableHeader.find('select').length > 0 || that.$tableHeader.find('input').length > 0) { return; } createFilter(that, that.$tableHeader); }).on('post-header.bs.table', function () { var timeoutId = 0; initSelect2(that); clearTimeout(timeoutId); timeoutId = setTimeout(function () { setFilterValues(that); }, that.options.searchTimeOut - 1000); }).on('column-switch.bs.table', function (field, checked) { setFilterValues(that); }); } _init.apply(this, Array.prototype.slice.apply(arguments)); }; BootstrapTable.prototype.initHeader = function () { _initHeader.apply(this, Array.prototype.slice.apply(arguments)); if (this.options.filter) { createFilter(this, this.$header); } }; BootstrapTable.prototype.initSearch = function () { _initSearch.apply(this, Array.prototype.slice.apply(arguments)); var that = this, filterValues = that.filterColumnsPartial; // Filter for client if (that.options.sidePagination === 'client') { this.data = $.grep(this.data, function (row, idx) { for (var field in filterValues) { var column = that.columns[$.fn.bootstrapTable.utils.getFieldIndex(that.columns, field)], filterValue = filterValues[field].toLowerCase(), rowValue = row[field]; rowValue = $.fn.bootstrapTable.utils.calculateObjectValue( that.header, that.header.formatters[$.inArray(field, that.header.fields)], [rowValue, row, idx], rowValue); if (column.filterStrictSearch) { if (!($.inArray(field, that.header.fields) !== -1 && (typeof rowValue === 'string' || typeof rowValue === 'number') && rowValue.toString().toLowerCase() === filterValue.toString().toLowerCase())) { return false; } } else { if (!($.inArray(field, that.header.fields) !== -1 && (typeof rowValue === 'string' || typeof rowValue === 'number') && (rowValue + '').toLowerCase().indexOf(filterValue) !== -1)) { return false; } } } return true; }); } }; BootstrapTable.prototype.onColumnSearch = function (event) { var field = $(event.currentTarget).attr('data-filter-field'), value = $.trim($(event.currentTarget).val()); if ($.isEmptyObject(this.filterColumnsPartial)) { this.filterColumnsPartial = {}; } if (value) { this.filterColumnsPartial[field] = value; } else { delete this.filterColumnsPartial[field]; } this.options.pageNumber = 1; this.onSearch(event); }; BootstrapTable.prototype.setFilterData = function (field, data) { var that = this, $header = getCurrentHeader(that), $selectEle = $header.find('select[data-filter-field=\"' + field + '\"]'); data.unshift(""); $selectEle.empty(); $selectEle.select2({ data: data, placeholder: "", allowClear: true, dropdownParent: that.$el.closest(".bootstrap-table") }); $.each(this.columns, function (idx, column) { if (column.field === field) { column.filter.data = data; return false; } }); }; BootstrapTable.prototype.setFilterValues = function (values) { this.filterColumnsPartial = values; }; $.fn.bootstrapTable.methods.push('setFilterData'); $.fn.bootstrapTable.methods.push('setFilterValues'); }(jQuery);