Question

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

Answer 1

通过互联网搜索后，我找到了一个代码，并对角度足部过滤器的工作方式进行了一些更改。

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

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并且总是希望按特定列过滤的人

Answer 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;
    };

这里的不同之处在于我们使用现有的属性＆＃34;数据值＆＃34;，但与原始filterFunction的区别仅在于我们不会将值附加到列的位置。文字，但替换它。简单地说数据值=＆＃34;＆＃34;在您不希望被过滤的每个td元素上。

特定柱的角度可调过滤器？

2 个答案: