需要使用文本搜索、复选框和选择从表外部过滤表。PicNet 表过滤器 http://www.picnet.com.au/resources/tablefilter/demo.htmfor jQuery 适用于搜索和使用表外的复选框...尽管我找不到任何有关如何使选择框工作的示例。有人知道吗？
**我可能在这里说得太具体，但我想我至少会询问一下。*
我也对 PicNet 以外的可能性持开放态度。
UPDATED：到目前为止，这是我的代码，我希望通过两个是/否复选框在正文顶部选择一个选项。
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>PicNet Table Filter Demo</title>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="picnet.table.filter.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Randomly Create Data Rows
// Initialise Plugin
var options1 = {
additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#itemone'), $('#quickfind')],
clearFiltersControls: [$('#cleanfilters')],
matchingRow: function(state, tr, textTokens) {
if (!state || !state.id) { return true; }
var val = tr.children('td:eq(2)').text();
var val2 = tr.children('td:eq(3)').text();
switch (state.id) {
case 'onlyyes': return state.value !== 'true' || val === 'yes';
case 'onlyno': return state.value !== 'true' || val === 'no';
case 'itemone': return state.value !== 'true' || val2 === 'Item 1';
default: return true;
}
}
};
$('#demotable1').tableFilter(options1);
});
</script>
<style>
* { font-family:arial; font-size:8pt;}
table, td, th { border: solid 1px silver; color:#666; padding:3px 5px 3px 5px}
th { background-color:#333; color:#fff; font-size:0.85em }
a { color:gray; }
.filtering { background-color:light-gray}
#jqtf_filters {
list-style:none;
}
#jqtf_filters li {
display:inline-block;
position:relative;
float:left;
margin-bottom:20px
}
.hidden, tr.filters { display: none;}
</style>
</head>
<body>
<b>Additional Filters for Table 1</b><br/>
Only Show Yes: <input type="checkbox" id="onlyyes"/>
Only Show No: <input type="checkbox" id="onlyno"/>
Only Show Item 1: <input type="checkbox" id="itemone"/>
<br/>
Quick Find: <input type="text" id="quickfind"/>
<br/>
<a id="cleanfilters" href="#">Clear Filters</a>
<br/><b>Table 1</b><br/>
<table id='demotable1'>
<thead>
<tr><th>Text Column 1</th><th>Number Column</th><th>Yes/No Column</th><th filter-type='ddl'>List Column</th><th style='width:100px;' filter='false'>No Filter</th><th>Date Column</th><th filter='false'>Empty</th><th class="hidden" filter='false'></th></tr>
</thead>
<tbody>
<tr>
<td>Value 102</td>
<td>420</td>
<td>yes</td>
<td>Item 1</td>
<td>hello</td>
<td>01/11//2009</td>
<td></td>
<td class="hidden">Ed Head</td>
</tr>
<tr>
<td>Value 134</td>
<td>987</td>
<td>no</td>
<td>Item 2</td>
<td>hi</td>
<td>03/11//2009</td>
<td></td>
<td class="hidden">Joe Blow</td>
</tr>
<tr>
<td>Value 654</td>
<td>722</td>
<td>yes</td>
<td>Item 3</td>
<td>hello</td>
<td>04/11//2009</td>
<td></td>
<td class="hidden">Jimmy</td>
</tr>
</tbody>
</table>
</body>
</html>
刚刚做了一个小例子供你尝试 http://jsfiddle.net/YZ9CP/。只是一个快速的概念证明。
<select id="filter">
<option value="dogs">dogs</option>
<option value="cats">cats</option>
</select>
<table id="boing" border="1">
<tr>
<th>header</th>
</tr>
<tr>
<td>dogs</td>
</tr>
<tr>
<td>dogs</td>
</tr>
<tr>
<td>cats</td>
</tr>
<tr>
<td>cats</td>
</tr>
<tr>
<td>dogs</td>
</tr>
</table>
还有 jQuery：
$("#filter").change(function(){
$("#boing").find("td").each(function(){
if($(this).text() != $("#filter").val()) $(this).hide();
else $(this).show();
});
});
如果您想隐藏/显示整行，请执行以下操作$(this).parent().hide() and $(this).parent().show()
需要记住的一件事是，如果您想要执行一个下拉列表来检查每行中的所有 TD，则必须调整代码，以便只有在没有 td 与下拉列表匹配的情况下才会隐藏该行。就像是this http://jsfiddle.net/2vUy9/.
<select id="filter">
<option value="dogs">dogs</option>
<option value="cats">cats</option>
</select>
<table id="boing" border="1">
<tr>
<th>header</th>
</tr>
<tr>
<td>dogs</td>
<td>dogs</td>
</tr>
<tr>
<td>dogs</td>
<td>cats</td>
</tr>
<tr>
<td>cats</td>
<td>dogs</td>
</tr>
<tr>
<td>cats</td>
<td>cats</td>
</tr>
<tr>
<td>dogs</td>
<td>cats</td>
</tr>
</table>
还有 jQuery：
$("#filter").change(function(){
$("#boing").children('tbody').children('tr').not(':first').each(function(){
var match = false;
$(this).children('td').each(function() {
if($(this).text() == $("#filter").val()) match = true;
});
if(match) $(this).show();
else $(this).hide();
});
});
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
