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

Question

我正在使用 bootstrap-table 插件。在这个插件中我添加了 data-advanced-search用于根据用户输入过滤行。因此，每当单击 down arrow 按钮时，都会打开一个模式。在此模式中，所有列都有输入，并且每当用户在此输入行中键入时都会被过滤。这工作正常。

现在，每当用户单击 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);