javascript - jQuery/Javascript - 连接两个过滤器 - 仅显示 tr 和 td 匹配数组

Question

我的代码当前有 2 个独立的过滤器，它们根据自己的条件过滤表。

我已经为代码的这个特定部分创建了一个简化的 jsfiddle。

我想做的是将这两个过滤器连接在一起。因此，例如，如果选择了“学生”，则“提交”按钮将仅筛选出与数组编号相对应的“学生”，但不会触及任何其他类型的驱动程序。

同样，如果表已被过滤，则选择驱动程序类型仅适用于已过滤掉的行。

这是代码:

$('body').on('click', 'button', function() {
    var array = [123, 124, 125, 126];
  var filter = function() {
    var match = false;
    $(this).find('td').each(function() {
      var currentText = $(this).text();
      var filtered = array.filter(function(value) {
        return value == currentText;
      });
      if (filtered.length > 0) {
        match = true;
      }
    });
    return match;
  };
  $('tr').hide().filter(filter).show();
});

                $('#driverTypes').change(function () {
                    var val = parseInt($(this).val(), 10);
                    switch (val) {
                        case 777:
                        $('tr').show();
                        break;
                        case 19:
                        $('tr').hide();
                            $('tr').filter(function() {
                                return $(this).data('filtercriteria') == "Lease Purchase";
                            }).show();
                        break;
                        case 20:
                        $('tr').hide();
                            $('tr').filter(function() {
                                return $(this).data('filtercriteria') == "Company Driver Team";
                            }).show();
                        break;
                        case 21:
                        $('tr').hide();
                            $('tr').filter(function() {
                                return $(this).data('filtercriteria') == "Student";
                            }).show();
                        break;
                        case 22:
                        $('tr').hide();
                            $('tr').filter(function() {
                                return $(this).data('filtercriteria') == "Company Driver";
                            }).show();
                        break;
                    }
                    });

http://jsfiddle.net/m4orLpd3/12/

谢谢

Answer 1

这里的代码可以完成您想要的操作。它将当前过滤器保留在全局对象中。每列存储一个单独的过滤器，执行过滤器时将两者组合起来:

// List of zip codes of interest
var zipFinal2 = [123, 124, 125, 126];
// Variable to retain currently applied filter:
// An array with a filter per column. 
var columnFilters = [{}, {}, {}, {}]; // add as many as you have columns
var zipColumnNo = 0;
var driverColumnNo = 1;

function applyFilter(filter) {
    $('tr').each(function() {
        $(this).toggle( // show when no TD has mismatching content
            !$(this).find('td').filter(function(idx) {
                // return true when content does not match the filter on this column
                return filter[idx] && Object.keys(filter[idx]).length &&
                                !filter[idx].hasOwnProperty($(this).text());
            }).length
        );
    });
}

$('#zipButton').click(function() {
    // toggle first-column filter:
    var newFilter = {};
    if (!Object.keys(columnFilters[zipColumnNo]).length) {
        // turn zipFinal2[] into object with values as properties for faster lookup
        zipFinal2.forEach(function(zip) {
            newFilter[zip] = 1;
        });
    }
    columnFilters[zipColumnNo] = newFilter;
    applyFilter(columnFilters);
});

$('#driverTypes').change(function () {
    columnFilters[driverColumnNo] =  {}; // no filter
    if (this.selectedIndex) {
         // filter second column on text in selected option
         columnFilters[driverColumnNo][$(this.options[this.selectedIndex]).text()] = 1;
    }
    applyFilter(columnFilters);
});

// reset filter on page load:
$(function() {
    $('#driverTypes').val(777);
});

查看 fiddle .

作为奖励，此代码还将“提交”按钮(奇怪的名称)视为切换:当您再次单击它时，该列上的过滤器将被删除。

刷新页面时，某些浏览器会保留下拉列表框中最后选择的值。所以我在最后添加了重置所需的代码。否则，情况会不一致:表的所有条目都可见，但在下拉列表中选择了过滤器。

只要使用两个控件之一，代码就会调用 applyFilter 方法，然后在所有 tr 元素上调用 toggle 方法。参数决定可见性。仅当没有 td 元素与过滤器不匹配时才会设置可见性。当且仅当为该列定义了过滤器(与空对象不同)并且 td 中的值不是该过滤器对象的属性时，td 才会不匹配.

如果您希望仅在 ECMAScript 6 兼容浏览器中运行，则可以使用 Set 而不是对象属性来存储过滤器值，从而使代码变得更好。

此外，如果您希望使用更多表进行过滤，则可以通过将 table 标记传递给 applyFilter 函数并存储 columnFilters 数组来使其更加通用在 table 标记的 data 属性中。