引导表(高级搜索)-单击自定义按钮时显示所有行

Question

我正在使用bootstrap-table插件。在这个插件中，我添加了数据高级搜索，用于根据用户输入过滤行。因此，每当单击向下箭头按钮时，就会打开一个模态。在这个模式中，所有列都有输入，每当用户在这个输入行中输入时都会被过滤。这很好用。

现在，每当用户单击clear按钮以再次显示表中的所有行时，我需要清除过滤器。因此，为了实现这一点，我在bootstrap-table-toolbar.min.js文件中进行了搜索，并在下面找到了负责清除搜索的代码&显示了行。即：

n.default("#avdSearchModalContent_".concat(e.idTable)).append(this.createFormAvd().join("")), n.default("#".concat(e.idForm)).off("keyup blur", "input").on("keyup blur", "input", (function(n) {
"server" === e.sidePagination ? t.onColumnAdvancedSearch(n) : (clearTimeout(o), o = setTimeout((function() { t.onColumnAdvancedSearch(n)
}), e.searchTimeOut))
})

我提出的一个解决方案是在模态内部的输入上使用blur()事件，这样上面的代码就会被调用，因为输入的值是""或null，所以它会显示所有行。如果我在模态中仅使用一个输入过滤行，则此解决方案有效，否则不起作用。

演示代码:

$(function() {
$('#table').bootstrapTable()
})
$(document).on("click", "#custom_clear", function() {
$("#advancedSearch input").val("")
$("#advancedSearch input:first").trigger("blur") //this works if user type only on first input in modal
//$("#advancedSearch input").trigger("blur")//this also doesn't work
//i have try to loop through input but this doesn't work
/* $("#advancedSearch input").each(function(i){
$(this).trigger("blur")
})*/
})

<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<button type="button" id="custom_clear" class="btn btn-danger">Clear</button>
<table id="table" data-pagination="true" data-search="true" data-advanced-search="true" data-id-table="advancedTable" data-show-search-clear-button="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>Item2</td>
<td>50</td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>

有人能帮我解决这个问题吗？或者有其他方法可以做到这一点吗？

Answer 1

基于源代码，我扩展了resetSearch函数来实现这一点：

BootstrapTable.prototype.resetSearch = function() {
// reset default search input
var $search = this.$toolbar.find('.search input');
$search.val('');
this.onSearch({
currentTarget: $search
});

// reset advanced search input
$(`#${this.options.idForm} input`).val('');
this.filterColumnsPartial = {};
if (this.options.sidePagination !== 'server') {
this.options.pageNumber = 1;
this.onSearch();
this.updatePagination();
this.trigger('column-advanced-search', {});
}
}
$(function() {
$('#table').bootstrapTable()
})
$(document).on("click", "#custom_clear", function() {
$('#table').bootstrapTable('resetSearch');
})

<link rel="stylesheet" href="https://kit-free.fontawesome.com/releases/latest/css/free.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
<button type="button" id="custom_clear" class="btn btn-danger">Clear</button>
<table id="table" data-pagination="true" data-search="true" data-advanced-search="true" data-id-table="advancedTable" data-show-search-clear-button="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Item Name</th>
<th data-field="price" data-sortable="true">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item1</td>
<td>50</td>
</tr>
<tr>
<td>2</td>
<td>Item2</td>
<td>50</td>
</tr>
</tbody>
</table>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/toolbar/bootstrap-table-toolbar.min.js"></script>

更新：当模糊事件触发时，您的代码无法工作，因为在搜索之前有一个超时。如果下一个模糊事件到来，它会清除超时并开始新的一个，所以只计算最后一个模糊的变化：

clearTimeout(timeoutId);
timeoutId = setTimeout(function () {
this.onColumnAdvancedSearch(e);
}, o.searchTimeOut);