特定列的 Angular-footable 过滤器？答案

【问题标题】：Angular-footable filter by specific column?特定列的 Angular-footable 过滤器？
【发布时间】：2016-05-20 18:42:46
【问题描述】：

我没有在 angular-footable 的文档中找到关于如何按特定列进行过滤的信息。但是，在此链接中http://fooplugins.github.io/FooTable/docs/examples/component/filtering.htmlfootable 支持按特定列进行过滤。有谁知道是否可以使用 angular-footable 实现相同的结果？

【问题讨论】：

来自文档fooplugins.github.io/FooTable/docs/components/…
是的，我知道可以使用 FooTable V3 按列过滤。然而，angular-footable 使用footable v2。我想知道是否有一种方法可以使用 angular-footable 按特定列进行过滤

标签： angularjs footable

【解决方案1】：

在网上搜索后，我找到了一段代码，并对angular-footable的过滤器的工作方式进行了一些修改。

因此，要按特定列进行过滤，在我的情况下，想要找到与您输入的内容匹配的所有内容，您应该将此代码放入您的控制器中：

window.footable.options.filter.filterFunction = function(index) {
                var $t = $(this),
                  $table = $t.parents('table:first'),
                  filter = $table.data('current-filter'),
                  columns = $t.find('.filterByMe');


                var row = $(this).parents('tr:first');
                var someColumn = $('td',row)[1];

                var regEx = new RegExp("\\b" + filter + "\\b");
                var result = false;
                for (var i = 0; i < columns.length; i++) {
                  var text = $(columns[i]).text();
                  result = text.indexOf(filter) >= 0;
                  if (result === true)
                    break;

                  if (!$table.data('filter-text-only')) {
                     text = $(columns[i]).data("value");
                     if (text)
                       result =  text.indexOf(filter) >= 0;
                  }

                  if (result === true)
                    break;
                }

                return result;
              };

columns = $t.find('.filterByMe'); 行是您应该在 html 中放置另一个逻辑的地方。就我而言，我添加了与表格的每一列相关的复选框。如果用户选中搜索字段上的复选框，则表示他/她想根据该列/列查找数据。

当用户点击复选框时，filterByMe类被添加到我的表格的标签<td>中。

这样做，您将能够按特定列进行搜索。

我希望这对使用 angular-footable 并且一直想按特定列进行过滤的任何人有所帮助

【讨论】：

【解决方案2】：

这是一个较短的版本：

    window.footable.options.filter.filterFunction = function(index) {
        var $t = $(this),
            $table = $t.parents('table:first'),
            filter = $table.data('current-filter').toUpperCase(),
            text = $t.find('td:not([data-value])').text(); // replace with data-value instead of append! can be used to disable filtering by some columns
        if (!$table.data('filter-text-only')) {
            $t.find('td[data-value]').each(function () {
                text += $(this).data('value'); 
            });
        }
        return text.toUpperCase().indexOf(filter) >= 0;
    };

这里的区别是我们使用了已经存在的属性“data-value”，但与原始filterFunction的区别只是我们不将值附加到列的文本中，而是替换它。只需将 data-value="" 放在您不想被过滤的每个 td 元素上。

【讨论】：