jQuery, фильтр на столе - PullRequest
       34

jQuery, фильтр на столе

0 голосов
/ 18 ноября 2009

У меня 1 проблема, я взял один плагин jquery (фильтр на столе).

Это URL: http://gregweber.info/projects/demo/flavorzoom.html

Но у меня немного другой случай:

Вместо этого (текстовое поле) я использую (выпадающее меню)

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

  });


});  

Если это возможно, помогите мне

Спасибо

Ответы [ 2 ]

2 голосов
/ 18 ноября 2009

Так что, если вы хотите просто сделать точное совпадение, фильтр может быть немного излишним, но вот дополнительная функция, которую нужно добавить к нему, чтобы сделать это:

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;
}
1 голос
/ 18 ноября 2009

Для вашего сценария плагин может быть излишним. Вы можете достичь желаемого эффекта с помощью фрагмента 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;

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...