在页眉(th)上添加按钮以隐藏和显示引导表中的过滤器控件 [英] Add button on header (th) to hide and show filter control in bootstrap table

问题描述

我正在使用带有过滤器控件的引导表.我希望能够在每个按钮上添加一个按钮(图标)以隐藏和显示过滤器控件.

I am using bootstrap table with filter control. I want to be able to add a button(icon) on each of my th's to hide and show the filter control.

有办法吗?

这是引导表上的示例: https://live.bootstrap-table.com/example/extensions/filter-control.html

This is an example on bootstrap table: https://live.bootstrap-table.com/example/extensions/filter-control.html

如您所见，过滤器控件在标题上占据了很多位置.我只是想看看是否有可能仅通过在标题上添加一个图标来添加过滤器控件，然后单击该图标即可添加过滤器控件.

As you can see the filter control takes up a lot of place on the header. I just wanted to see if it was possible to only add the filter control by adding an icon on the header that adds the filter control on click of that icon.

我的代码:

<table
  id="table"
  data-url="json/data1.json"
  data-filter-control="true"
  data-show-search-clear-button="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name" data-filter-control="input" data-sortable="true">Item Name</th>
      <th data-field="price" data-filter-control="select" data-sortable="true">Item Price</th>
    </tr>
  </thead>
</table>

JS

 $(function() {
    $('#table').bootstrapTable()
  })

当我尝试为图标添加附件时:

When I try and add the append for the icon:

    $('#table thead th').each(function() {
    s = $('<span style="position: absolute; left: 4px; top: 8px; cursor: pointer;">?</span>')
    s.click(function(e) {
        e.stopPropagation();
        alert('Question mark clicked')
    });
    $(this).append(s)
  })

对于初学者来说，它仅在第一个 th 上添加图标，第二个问题是在单击它时，它对数据进行排序，而不是给我设置的虚拟警报，以查看是否点击有效.

For starters, it only adds the icon on the first th and the second problem is that on click it, it sorts the data instead of giving me the dummy alert I set up to see if the click is working.

如何在左侧添加可点击图标而不影响排序?

How do I add a clickable icon on the left without affecting the sorting?

推荐答案

您可以将在 each 循环内的 span 附加到 th-inner ，以便它与标题并排显示.此外，您可以隐藏 filter-control div，其中包含需要使用 input 或 select .因此，每当单击?时，只需获取该div的引用即可显示/隐藏该div.

You can append span which you have created inside each loop under th-inner so that it will appear side by side of the header .Also , you can hide filter-control div this contains the filter which you need to use either input or select.So , whenever ? is clicked just get reference of this div to show/hide same.

演示代码 :

$(function() {
  $('#table').bootstrapTable()
  $(".filter-control").hide() //hide filter control
  $('#table thead th').each(function() {
    s = $('<span style="position: absolute;margin-left:10px">?</span>')
    s.click(function(e) {
      e.stopPropagation();
      //get closest filter control div hide/show same
      $(this).closest("th").find(".filter-control").toggle();
    });
    //append span inside th-inner class
    $(this).find(".th-inner").append(s)

  })
})

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table@1.18.0/dist/bootstrap-table.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<table id="table" data-filter-control="true" data-show-search-clear-button="true">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name" data-filter-control="input">Item Name</th>
      <th data-field="price" data-filter-control="select">Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Item 1</td>
      <td>$1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Item 2</td>
      <td>$2</td>
    </tr>
  </tbody>
</table>

这篇关于在页眉(th)上添加按钮以隐藏和显示引导表中的过滤器控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！