|
|
@@ -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);
|
wenzhixin