我的代码当前有 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/
谢谢
最佳答案
这里的代码可以完成您想要的操作。它将当前过滤器保留在全局对象中。每列存储一个单独的过滤器,执行过滤器时将两者组合起来:
// 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 属性中。
关于javascript - jQuery/Javascript - 连接两个过滤器 - 仅显示 tr 和 td 匹配数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33575932/