jQuery treetable 中的搜索过滤器答案

【问题标题】：Search filter in jQuery treetablejQuery treetable 中的搜索过滤器
【发布时间】：2017-10-30 13:32:55
【问题描述】：

我想在我的树表中实现一个搜索过滤器。我正在使用 JQuery treetable 库，这是我到目前为止所做的，但它似乎没有工作。有人知道为什么吗？

这是我的 HTML：

<table id="example">
  <tbody>
    <thead>
      <tr>
        <th>Tree data</th>
      </tr>
      <input class="search" placeholder="Search" />
      <p class="log"></p>
    </thead>
</tbody>

这是我为搜索过滤器实现的功能：

var $rows = $('#example tr').treetable({expandable: true});
$('#search').keyup(function() {
  var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();

  $rows.show().filter(function() {
    var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
    return !~text.indexOf(val);
  }).hide();
});

【问题讨论】：

标签： jquery html treetable

【解决方案1】：

首先，它应该是 $('.search').keyup ... 而不是 $('#search').keyup... 。

其次，我认为，更好的方法是：

var $rows = $('#tree_table tbody tr').treetable({expandable: true});
$('.search').keyup(function() {
    var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    $rows.show().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        return !~text.indexOf(val);
    }).hide();
});

这样，头部始终保持不变。

【讨论】：