问题描述
我有一个表格,可以通过多个复选框以及选择"下拉列表进行过滤.本质上,我希望能够做的是单击多个复选框以找到包含该类的每一行,例如类 1 和类 3 或示例,然后按位置对其进行过滤.
I've got a table that can be filtered by multiple checkboxes, as well as by a "select" dropdown. Essentially, what I want to be able to do is click on multiple checkboxes in order to find each row containing that class, so class 1 and 3, or example, and then filter it by the location.
此时我已经非常接近了,我可以在其中选择位置(这也是一个类,两个字母表示州缩写)和复选框中的一个类,但我希望人们能够比较复选框中的多个类.
I've gotten really close at this point, where I can select both the location (which is also a class, two letters for state abbreviations), and a single class from the checkboxes, but I want people to be able to compare multiple classes from the checkboxes.
我明白这个问题,但似乎不知道如何解决.代码将每个类添加到tr"的末尾.这意味着如果您从复选框中应用 2 个过滤器,它不会找到任何内容,而不是从每个过滤器中找到所有内容.虽然此行为对于 1 复选框和下拉列表非常有用,这意味着它只会给我来自田纳西州的过滤器 1 值,但我希望它能够同时为我提供过滤器 2、过滤器 3 和过滤器 4,如果我所以选择.
The problem is something I understand, but can't seem to figure out how to fix. The code adds each class to the end of the "tr". This means if you apply 2 filters from the checkboxes, it finds nothing, instead of finding everything from each filter. While this behavior is perfectly functional for 1 checkbox and the Dropdown, meaning it will only give me Filter 1 values from Tennessee, I want it to be able to give me Filter 2, Filter 3, and Filter 4 at the same time, if I so choose.
关于如何更改它以允许多个复选框选择的任何想法?
Any ideas on how to alter this to make it allow multiple checkbox selections?
顺便说一下,我可以使用的 JavaScript/jQuery 插件非常有限,这就是为什么我如此努力地在这个解决方案中使用 tableSorter.
By the way, I'm very limited in what JavaScript/jQuery plugins I can use, which is why I'm fighting so hard to use tableSorter with this solution.
我的 HTML:
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="1" /><label for="filter_1">Filter 1</label>
<input type="checkbox" name="filterStatus" value="2" /><label for="filter_2">Filter 2</label>
<input type="checkbox" name="filterStatus" value="3" /><label for="filter_3">Filter 3</label>
<input type="checkbox" name="filterStatus" value="4" /><label for="filter_4">Filter 4</label>
<select type="dropdown" name="filterStatus" id="chooseState" class="filter">
<option value="ZZ">--Choose State--</option>
<option value="TN">Tennessee</option>
<option value="MO">Missouri</option>
<option value="NV">Nevada</option>
<option value="IA">Iowa</option>
</select><label>State</label>
</form>
<table id="StatusTable">
<tbody>
<tr class="1 TN">
<td class="Name"></td>
<td class="ID"></td>
<td class="Type"></td>
<td class="Location">City, Tennessee</td>
<td class="Class"></td>
<td class="Received"></td>
<td class="Action"></td>
<td class="Status">Active</td>
</tr>
</tbody>
</table>
JavaScript:
JavaScript:
$("input[name='filterStatus'], select.filter").change(function () {
var classes = "";
var stateClass = ""
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes += "." + $(this).val();
}
});
$("select.filter").each(function() {
if ($(this).val() != 'ZZ') {
stateClass += "." + $(this).val();
}
});
if (classes == "" && stateClass == "") {
// if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else {
// otherwise, hide everything...
$("#StatusTable tbody tr").hide();
// then show only the matching items
rows = $("#StatusTable tr" + classes + stateClass);
if (rows.size() > 0) {
rows.show();
}
}
});
推荐答案
既然你知道问题所在,我就跳过解释直接跳到解决方案.
Since you know the problem, ill skip the explication and jump to the solution.
使用与数组混合的 .filter()
方法.
Use the .filter()
method mixed with an array.
不使用字符串,而是将类名放入数组中:
Instead of expending a string, push the class name into an array :
var classes = [];
$("input[name='filterStatus']").each(function() {
if ($(this).is(":checked")) {
classes.push('.'+$(this).val());
}
});
然后在选择行时,使用 .filter()
就像这样:
Then when selecting the row, use .filter()
just like that :
rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*')
然后一切正常!
这篇关于如何添加到我的表格过滤器以允许多个复选框选择,以及从下拉列表中过滤?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!