2009-11-18 91 views
0

我有1個問題,我採取了一個jQuery插件(過濾器表)。jQuery,過濾器表

這是網址:http://gregweber.info/projects/demo/flavorzoom.html

但我有一點點不同的情況:

相反(文本)我用(dropdawn菜單)

<select class="filter_tb"> 
    <option value="">All</option> 
    <option value="6-K">6-K</option> 
    <option value="20-F">20-F</option> 
    <option value="SC 13G/A">SC 13G/A</option> 
    <option value="SC 13G">SC 13G</option> 
    <option value="F-10/A">F-10/A</option> 
    <option value="F-X">F-X</option> 
    <option value="F-10">F-10</option> 
</select> 

我被值做濾波,但這是一個問題:當我在表中選擇「SC 13G」時當然顯示「SC 13G/A」。

我可以阻止這個嗎?我想只顯示 「SC 13G」 同一個是 「F-10 ---> F-10/A」

這是我的jQuery選擇:

$(function() { 
    var theTable = $('table.RegulatoryFilingsTable') 


    $(".filter_tb").change(function() { 
    $.uiTableFilter(theTable, this.value); 

    }); 


}); 

如果可能的話,幫我

謝謝

+0

因此,您希望它完全匹配,而不是根據條目可能包含的文本進行過濾。 – SimonDever 2009-11-18 03:24:53

回答

1

對於你的情況該插件可能是矯枉過正。可以實現與下面的jQuery的片段預期的效果:

$(".filter_tb").change(function() { 
    $(".food_planner tbody tr td:nth-child(2)").each(function() { 
     if ($(this).text() != this.value) { 
      $(this).parent().hide(); 
     } else { 
      $(this).parent().show(); 
     } 
    }); 
}); 

如果你想使用這個插件,你可以把它通過修改以下行工作:

第26行:var words = phrase.toLowerCase().split(" ");var words = phrase.toLowerCase();

87號線:if (text.indexOf(words[i]) === -1) return false;if (text != words[i]) return false;

+0

腳本中出現錯誤,它隱藏了所有行,而不僅僅是父行 – AlexC 2009-11-18 03:27:31

+0

謝謝,我修正了,非常感謝你的一個好主意...... – AlexC 2009-11-18 03:34:44

2

所以,如果你是想根本就完全匹配過濾器可能會有點矯枉過正,但這裏是一個額外的函數T Ø添加到它能夠做到這一點:

jQuery.uiTableFilter.is_word = function(str, words, caseSensitive) 
{ 
    var text = caseSensitive ? str : str.toLowerCase(); 
    if(text == words) return true; 
    return false; 
} 

這裏是我完整的代碼我用來測試:

<html> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript" src="./tablefilter.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() 
      {     
       var theTable = $('table.RegulatoryFilingsTable'); 
       $(".filter_tb").change(function() { 
       $.uiTableFilter(theTable, this.value); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <select class="filter_tb"> 
      <option value="">All</option> 
      <option value="6-K">6-K</option> 
      <option value="20-F">20-F</option> 
      <option value="SC 13G/A">SC 13G/A</option> 
      <option value="SC 13G">SC 13G</option> 
      <option value="F-10/A">F-10/A</option> 
      <option value="F-X">F-X</option> 
      <option value="F-10">F-10</option> 
     </select> 

     <br/><br/> 

     <table class="RegulatoryFilingsTable"> 
      <thead><tr><th colspan="2">Your List</th><tr></thead> 
      <tbody> 
       <tr><td>6-K</td></tr> 
       <tr><td>20-F</td></tr> 
       <tr><td>SC 13G/A</td></tr> 
       <tr><td>SC 13G</td></tr> 
       <tr><td>F-10/A</td></tr> 
       <tr><td>F-X</td></tr> 
       <tr><td>F-10</td></tr> 
      </tbody> 
     </table> 
    </body> 
</html> 

而修改後的表過濾器腳本的整體(我稱之爲tablefilter.js) :

/* 
* Copyright (c) 2008 Greg Weber greg at gregweber.info 
* Dual licensed under the MIT and GPL licenses: 
* http://www.opensource.org/licenses/mit-license.php 
* http://www.gnu.org/licenses/gpl.html 
* 
* documentation at http://gregweber.info/projects/uitablefilter 
* 
* allows table rows to be filtered (made invisible) 
* <code> 
* t = $('table') 
* $.uiTableFilter(t, phrase) 
* </code> 
* arguments: 
* jQuery object containing table rows 
* phrase to search for 
* optional arguments: 
*  column to limit search too (the column title in the table header) 
*  ifHidden - callback to execute if one or more elements was hidden 
*/ 
jQuery.uiTableFilter = function(jq, phrase, column, ifHidden){ 
    var new_hidden = false; 
    if(this.last_phrase === phrase) return false; 

    var phrase_length = phrase.length; 
    var words = phrase.toLowerCase().split(" "); 

    // these function pointers may change 
    var matches = function(elem) { elem.show() } 
    var noMatch = function(elem) { elem.hide(); new_hidden = true } 
    var getText = function(elem) { return elem.text() } 

    if(column) { 
    var index = null; 
    jq.find("thead > tr:last > th").each(function(i){ 
     if($(this).text() == column){ 
     index = i; return false; 
     } 
    }); 
    if(index == null) throw("given column: " + column + " not found") 

    getText = function(elem){ return jQuery(elem.find(
     ("td:eq(" + index + ")") )).text() 
    } 
} 

    // if added one letter to last time, 
    // just check newest word and only need to hide 
    if((words.size > 1) && (phrase.substr(0, phrase_length - 1) === 
     this.last_phrase)) { 

    if(phrase[-1] === " ") 
    { this.last_phrase = phrase; return false; } 

    var words = words[-1]; // just search for the newest word 

    // only hide visible rows 
    matches = function(elem) {;} 
    var elems = jq.find("tbody > tr:visible") 
    } 
    else { 
    new_hidden = true; 
    var elems = jq.find("tbody > tr") 
    } 

    /* elems.each(function(){ 
    var elem = jQuery(this); 
    jQuery.uiTableFilter.has_words(getText(elem), words, false) ? 
     matches(elem) : noMatch(elem); 
    }); */ 

    elems.each(function(){ 
    var elem = jQuery(this); 
    jQuery.uiTableFilter.is_word(getText(elem), words, false) ? 
     matches(elem) : noMatch(elem); 
    }); 

    last_phrase = phrase; 
    if(ifHidden && new_hidden) ifHidden(); 
    return jq; 
}; 

// caching for speedup 
jQuery.uiTableFilter.last_phrase = "" 

// not jQuery dependent 
// "" [""] -> Boolean 
// "" [""] Boolean -> Boolean 
jQuery.uiTableFilter.has_words = function(str, words, caseSensitive) 
{ 
    var text = caseSensitive ? str : str.toLowerCase(); 
    for (var i=0; i < words.length; i++) { 
    if (text.indexOf(words[i]) === -1) return false; 
    } 
    return true; 
} 

jQuery.uiTableFilter.is_word = function(str, words, caseSensitive) 
{ 
    var text = caseSensitive ? str : str.toLowerCase(); 
    if(text == words) return true; 
    return false; 
} 
+0

謝謝,我已經完成了沒有過濾器插件。 – AlexC 2009-11-18 03:49:40