我正在使用https://www.jqueryscript.net/table/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin.html进行表格过滤。我有一些可编辑的表格单元格。为此，我正在使用标签。
问题：过滤开始所有行之后，即使我正在过滤另一列，当我在任何单词上放一个标记时，都存在，消失。例如，如果我将标记从“ text2”或“ textb”中移开，则带有“ text1”的整行将永远消失（在重新加载页面之前）。我该如何解决（也许，更改一些插件JavaScript代码）？
(function ($$1) {
'use strict';
$$1 = 'default' in $$1 ? $$1['default'] : $$1;
var FilterMenu = function () {
function FilterMenu(target, th, column, index, options) {
this.options = options;
this.th = th;
this.column = column;
this.index = index;
this.tds = target.find('tbody tr td:nth-child(' + (this.column + 1) + ')').toArray();
}
FilterMenu.prototype.initialize = function () {
this.menu = this.dropdownFilterDropdown();
this.th.appendChild(this.menu);
var $trigger = $(this.menu.children[0]);
var $content = $(this.menu.children[1]);
var $menu = $(this.menu);
$trigger.click(function () {
return $content.toggle();
});
$(document).click(function (el) {
if (!$menu.is(el.target) && $menu.has(el.target).length === 0) {
$content.hide();
}
});
};
FilterMenu.prototype.searchToggle = function (value) {
if (this.selectAllCheckbox instanceof HTMLInputElement) this.selectAllCheckbox.checked = false;
if (value.length === 0) {
this.toggleAll(true);
if (this.selectAllCheckbox instanceof HTMLInputElement) this.selectAllCheckbox.checked = true;
return;
}
this.toggleAll(false);
this.inputs.filter(function (input) {
return input.value.toLowerCase().indexOf(value.toLowerCase()) > -1;
}).forEach(function (input) {
input.checked = true;
});
};
FilterMenu.prototype.updateSelectAll = function () {
if (this.selectAllCheckbox instanceof HTMLInputElement) {
$(this.searchFilter).val('');
this.selectAllCheckbox.checked = this.inputs.length === this.inputs.filter(function (input) {
return input.checked;
}).length;
}
};
FilterMenu.prototype.selectAllUpdate = function (checked) {
$(this.searchFilter).val('');
this.toggleAll(checked);
};
FilterMenu.prototype.toggleAll = function (checked) {
for (var i = 0; i < this.inputs.length; i++) {
var input = this.inputs[i];
if (input instanceof HTMLInputElement) input.checked = checked;
}
};
FilterMenu.prototype.dropdownFilterItem = function (td, self) {
var value = td.innerText;
var dropdownFilterItem = document.createElement('div');
dropdownFilterItem.className = 'dropdown-filter-item';
var input = document.createElement('input');
input.type = 'checkbox';
input.value = value.trim().replace(/ +(?= )/g, '');
input.setAttribute('checked', 'checked');
input.className = 'dropdown-filter-menu-item item';
input.setAttribute('data-column', self.column.toString());
input.setAttribute('data-index', self.index.toString());
dropdownFilterItem.appendChild(input);
dropdownFilterItem.innerHTML = dropdownFilterItem.innerHTML.trim() + ' ' + value;
return dropdownFilterItem;
};
FilterMenu.prototype.dropdownFilterItemSelectAll = function () {
var value = this.options.captions.select_all;
var dropdownFilterItemSelectAll = document.createElement('div');
dropdownFilterItemSelectAll.className = 'dropdown-filter-item';
var input = document.createElement('input');
input.type = 'checkbox';
input.value = this.options.captions.select_all;
input.setAttribute('checked', 'checked');
input.className = 'dropdown-filter-menu-item select-all';
input.setAttribute('data-column', this.column.toString());
input.setAttribute('data-index', this.index.toString());
dropdownFilterItemSelectAll.appendChild(input);
dropdownFilterItemSelectAll.innerHTML = dropdownFilterItemSelectAll.innerHTML + ' ' + value;
return dropdownFilterItemSelectAll;
};
FilterMenu.prototype.dropdownFilterSearch = function () {
var dropdownFilterItem = document.createElement('div');
dropdownFilterItem.className = 'dropdown-filter-search';
var input = document.createElement('input');
input.type = 'text';
input.className = 'dropdown-filter-menu-search form-control';
input.setAttribute('data-column', this.column.toString());
input.setAttribute('data-index', this.index.toString());
input.setAttribute('placeholder', this.options.captions.search);
dropdownFilterItem.appendChild(input);
return dropdownFilterItem;
};
FilterMenu.prototype.dropdownFilterSort = function (direction) {
var dropdownFilterItem = document.createElement('div');
dropdownFilterItem.className = 'dropdown-filter-sort';
var span = document.createElement('span');
span.className = direction.toLowerCase().split(' ').join('-');
span.setAttribute('data-column', this.column.toString());
span.setAttribute('data-index', this.index.toString());
span.innerText = direction;
dropdownFilterItem.appendChild(span);
return dropdownFilterItem;
};
FilterMenu.prototype.dropdownFilterContent = function () {
var _this = this;
var self = this;
var dropdownFilterContent = document.createElement('div');
dropdownFilterContent.className = 'dropdown-filter-content';
var innerDivs = this.tds.reduce(function (arr, el) {
var values = arr.map(function (el) {
return el.innerText.trim();
});
if (values.indexOf(el.innerText.trim()) < 0) arr.push(el);
return arr;
}, []).sort(function (a, b) {
var A = a.innerText.toLowerCase();
var B = b.innerText.toLowerCase();
if (!isNaN(Number(A)) && !isNaN(Number(B))) {
if (Number(A) < Number(B)) return -1;
if (Number(A) > Number(B)) return 1;
} else {
if (A < B) return -1;
if (A > B) return 1;
}
return 0;
}).map(function (td) {
return _this.dropdownFilterItem(td, self);
});
this.inputs = innerDivs.map(function (div) {
return div.firstElementChild;
});
var selectAllCheckboxDiv = this.dropdownFilterItemSelectAll();
this.selectAllCheckbox = selectAllCheckboxDiv.firstElementChild;
innerDivs.unshift(selectAllCheckboxDiv);
var searchFilterDiv = this.dropdownFilterSearch();
this.searchFilter = searchFilterDiv.firstElementChild;
var outerDiv = innerDivs.reduce(function (outerDiv, innerDiv) {
outerDiv.appendChild(innerDiv);
return outerDiv;
}, document.createElement('div'));
outerDiv.className = 'checkbox-container';
var elements = [];
if (this.options.sort) elements = elements.concat([this.dropdownFilterSort(this.options.captions.a_to_z), this.dropdownFilterSort(this.options.captions.z_to_a)]);
if (this.options.search) elements.push(searchFilterDiv);
return elements.concat(outerDiv).reduce(function (html, el) {
html.appendChild(el);
return html;
}, dropdownFilterContent);
};
FilterMenu.prototype.dropdownFilterDropdown = function () {
var dropdownFilterDropdown = document.createElement('div');
dropdownFilterDropdown.className = 'dropdown-filter-dropdown';
var arrow = document.createElement('span');
arrow.className = 'glyphicon glyphicon-arrow-down dropdown-filter-icon';
var icon = document.createElement('i');
icon.className = 'arrow-down';
arrow.appendChild(icon);
dropdownFilterDropdown.appendChild(arrow);
dropdownFilterDropdown.appendChild(this.dropdownFilterContent());
if ($(this.th).hasClass('no-sort')) {
$(dropdownFilterDropdown).find('.dropdown-filter-sort').remove();
}
if ($(this.th).hasClass('no-filter')) {
$(dropdownFilterDropdown).find('.checkbox-container').remove();
}
if ($(this.th).hasClass('no-search')) {
$(dropdownFilterDropdown).find('.dropdown-filter-search').remove();
}
return dropdownFilterDropdown;
};
return FilterMenu;
}();
var FilterCollection = function () {
function FilterCollection(target, options) {
this.target = target;
this.options = options;
this.ths = target.find('th' + options.columnSelector).toArray();
this.filterMenus = this.ths.map(function (th, index) {
var column = $(th).index();
return new FilterMenu(target, th, column, index, options);
});
this.rows = target.find('tbody').find('tr').toArray();
this.table = target.get(0);
}
FilterCollection.prototype.initialize = function () {
this.filterMenus.forEach(function (filterMenu) {
filterMenu.initialize();
});
this.bindCheckboxes();
this.bindSelectAllCheckboxes();
this.bindSort();
this.bindSearch();
};
FilterCollection.prototype.bindCheckboxes = function () {
var filterMenus = this.filterMenus;
var rows = this.rows;
var ths = this.ths;
var updateRowVisibility = this.updateRowVisibility;
this.target.find('.dropdown-filter-menu-item.item').change(function () {
var index = $(this).data('index');
var value = $(this).val();
filterMenus[index].updateSelectAll();
updateRowVisibility(filterMenus, rows, ths);
});
};
FilterCollection.prototype.bindSelectAllCheckboxes = function () {
var filterMenus = this.filterMenus;
var rows = this.rows;
var ths = this.ths;
var updateRowVisibility = this.updateRowVisibility;
this.target.find('.dropdown-filter-menu-item.select-all').change(function () {
var index = $(this).data('index');
var value = this.checked;
filterMenus[index].selectAllUpdate(value);
updateRowVisibility(filterMenus, rows, ths);
});
};
FilterCollection.prototype.bindSort = function () {
var filterMenus = this.filterMenus;
var rows = this.rows;
var ths = this.ths;
var sort = this.sort;
var table = this.table;
var options = this.options;
var updateRowVisibility = this.updateRowVisibility;
this.target.find('.dropdown-filter-sort').click(function () {
var $sortElement = $(this).find('span');
var column = $sortElement.data('column');
var order = $sortElement.attr('class');
sort(column, order, table, options);
updateRowVisibility(filterMenus, rows, ths);
});
};
FilterCollection.prototype.bindSearch = function () {
var filterMenus = this.filterMenus;
var rows = this.rows;
var ths = this.ths;
var updateRowVisibility = this.updateRowVisibility;
this.target.find('.dropdown-filter-search').keyup(function () {
var $input = $(this).find('input');
var index = $input.data('index');
var value = $input.val();
filterMenus[index].searchToggle(value);
updateRowVisibility(filterMenus, rows, ths);
});
};
FilterCollection.prototype.updateRowVisibility = function (filterMenus, rows, ths) {
var showRows = rows;
var hideRows = [];
var selectedLists = filterMenus.map(function (filterMenu) {
return {
column: filterMenu.column,
selected: filterMenu.inputs.filter(function (input) {
return input.checked;
}).map(function (input) {
return input.value.trim().replace(/ +(?= )/g, '');
})
};
});
for (var i = 0; i < rows.length; i++) {
var tds = rows[i].children;
for (var j = 0; j < selectedLists.length; j++) {
var content = tds[selectedLists[j].column].innerText.trim().replace(/ +(?= )/g, '');
if (selectedLists[j].selected.indexOf(content) === -1) {
$(rows[i]).hide();
break;
}
$(rows[i]).show();
}
}
};
FilterCollection.prototype.sort = function (column, order, table, options) {
var flip = 1;
if (order === options.captions.z_to_a.toLowerCase().split(' ').join('-')) flip = -1;
var tbody = $(table).find('tbody').get(0);
var rows = $(tbody).find('tr').get();
rows.sort(function (a, b) {
var A = a.children[column].innerText.toUpperCase();
var B = b.children[column].innerText.toUpperCase();
if (!isNaN(Number(A)) && !isNaN(Number(B))) {
if (Number(A) < Number(B)) return -1 * flip;
if (Number(A) > Number(B)) return 1 * flip;
} else {
if (A < B) return -1 * flip;
if (A > B) return 1 * flip;
}
return 0;
});
for (var i = 0; i < rows.length; i++) {
tbody.appendChild(rows[i]);
}
};
return FilterCollection;
}();
$$1.fn.excelTableFilter = function (options) {
var target = this;
options = $$1.extend({}, $$1.fn.excelTableFilter.options, options);
if (typeof options.columnSelector === 'undefined') options.columnSelector = '';
if (typeof options.sort === 'undefined') options.sort = true;
if (typeof options.search === 'undefined') options.search = true;
if (typeof options.captions === 'undefined') options.captions = {
a_to_z: 'A to Z',
z_to_a: 'Z to A',
search: 'Search',
select_all: 'Select All'
};
var filterCollection = new FilterCollection(target, options);
filterCollection.initialize();
return target;
};
$$1.fn.excelTableFilter.options = {};
}(jQuery));
//# sourceMappingURL=excel-bootstrap-table-filter-bundle.js.map<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
</thead>
<tbody>
<tr>
<td><textarea>text1</textarea></td>
<td>texta</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text2</td>
<td>textb</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text3</td>
<td>textc</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text4</td>
<td>textd</td>
<td>text</td>
<td>text</td>
</tr>
</tbody>
</table>