| /pack-rat/003_pack_rat/pack-rat/node_modules/bootstrap-table/src/extensions/select2-filter/bootstrap-table-select2-filter.js |
|---|
| @@ -0,0 +1,303 @@ |
|---|
| /** |
| * @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('<div class="no-filter"></div>'); |
| } else { |
| var filterClass = column.filter.class ? ' ' + column.filter.class : ''; |
| html.push('<div style="margin: 0px 2px 2px 2px;" class="filter' + filterClass + '">'); |
| |
| if (column.searchable) { |
| enableFilter = true; |
| isVisible = 'visible' |
| } |
| |
| switch (column.filter.type.toLowerCase()) { |
| case 'input' : |
| html.push('<input type="text" data-filter-field="' + column.field + '" style="width: 100%; visibility:' + isVisible + '">'); |
| break; |
| case 'select': |
| html.push('<select data-filter-field="' + column.field + '" style="width: 100%; visibility:' + isVisible + '"></select>'); |
| 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); |
