Question

需要从表格外部过滤表格，包括文本搜索，复选框和选择。 jQuery PicNet Table Filter适用于搜索和使用表格外的复选框...虽然我找不到任何有关如何使选择框工作的示例。有人知道吗？

**我可能会在这里变得过于具体，但我想我至少会询问。*

我也对PicNet以外的其他可能性持开放态度。

更新：到目前为止，这是我的代码，我想通过两个是/否复选框在主体顶部选择一个选项。

<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>

Answer 1

Just made a small example for you to try out。只是一个快速的概念证明。

<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()和$(this).parent().show()

要记住的一件事是，如果你想做一个检查每行中所有TD的下拉列表，你将不得不调整代码，这样只有当tds的NONE与下拉列表匹配时它才会隐藏行。类似于this。

<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();
    });
});

Answer 2

我不知道你要做什么（“需要从桌子外面过滤一个桌子” - wtf的意思是什么？）。但是如果你试图使用jQuery获取选择框的值：

$('#yourSelectList').val() // Option value
$('#yourSelectList :selected').text() // Option text value

jQuery表过滤器，带有文本，复选框，选择

2 个答案: