Angular-按特定列过滤？

Question

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

Answer 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 中放置另一个逻辑的位置。在我的例子中，我添加了与 table 的每一列相关的复选框。如果用户选中搜索字段上的复选框，则表示 he/she 想要根据 column/columns.

查找数据

当用户点击复选框时，class filterByMe 被添加到我的 table 的标签 <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;
    };

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

Angular-按特定列过滤？

Angular-footable filter by specific column?

angularjs

footable