Фильтрация категорий / подкатегорий с помощью jQuery - PullRequest
Новая
       6

Фильтрация категорий / подкатегорий с помощью jQuery

1 голос
/ 09 июля 2010

У меня есть таблица, где в каждой строке есть столбец категории и столбец подкатегории. Мне нужно разрешить пользователям выбирать категорию для фильтрации, а затем показывать только связанные подкатегории, чтобы они могли фильтровать дальше. Я думаю, что это может быть раскрывающийся список выбора и отображать второй раскрывающийся список только при наличии подкатегорий. Я видел несколько примеров, в которых используются серверные сценарии (например, решение Реми Шарпа http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/), но мне просто нужно строго клиентское решение jQuery. У кого-нибудь есть предложения по наилучшему способу сделать это или примеры этого

Ответы [ 2 ]

1 голос
/ 10 июля 2010

Мне нравится идея Дэна, поэтому я расширил ее (довольно немного). Вы должны быть в состоянии вставить это в текстовый редактор и посмотреть, как он работает.

В основном, это использование классов в TR для их отображения и скрытия, а также использование большего количества скрытых выборок для отображения групп подкатегорий. 

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<select id="masterCategory">
  <option value="all">All</option>
  <option value="sandwiches">Sandwiches</option>
  <option value="bagels">Bagels</option>
</select>

<div>

  <select id="all">
    <option value="all">All</option>
    <option value="pastrami">Pastrami</option>
    <option value="pbj">PBJ</option>
    <option value="baconranch">Bacon &amp; Ranch</option>
    <option value="jalapeno">Jalapeno</option>
    <option value="onion">Onion</option>
    <option value="poppyseed">Poppyseed</option>
  </select>

  <select id="sandwiches" style="display: none">
    <option value="sandwiches">All</option>
    <option value="pastrami">Pastrami</option>
    <option value="pbj">PBJ</option>
    <option value="baconranch">Bacon &amp; Ranch</option>
  </select>

  <select id="bagels" style="display: none">
    <option value="bagels">All</option>
    <option value="jalapeno">Jalapeno</option>
    <option value="onion">Onion</option>
    <option value="poppyseed">Poppyseed</option>
  </select>

</div>

<table id="content">
  <tr class="sandwiches pastrami pbj"><td>sandwiches pastrami pbj</td></tr>
  <tr class="sandwiches baconranch"><td>sandwiches baconranch</td></tr>
  <tr class="bagels jalapeno"><td>bagels jalapeno</td></tr>
  <tr class="bagels onion poppyseed"><td>bagels onion poppyseed</td></tr>
</table>

<script type="text/javascript">

  $(function(){

    $('select').bind('change', function(){
      var category = $(this).val();

      $('table#content').find('tr').each(function(){
        if($(this).hasClass(category) || category == 'all'){
          $(this).show();
        } else {
          $(this).hide();    
        }
      });
    });

    $('select#masterCategory').bind('change', function(){

      $('select#' + $(this).val()).fadeIn().siblings().fadeOut();

    });

  });

</script>
0 голосов
/ 09 июля 2010

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

<table>
   <tr class="topLevelCategoryA subCategoryC"><td>content</td></tr>
   <tr class="topLevelCategoryB subCategoryC"><td>content</td></tr>
   <tr class="topLevelCategoryD"><td>content</td></tr>
   <tr class="topLevelCategoryZ subCategoryC"><td>content</td></tr>
</table>

function classifyCategories() {
   var parentCategory = $('#mainSelect').val();
   var subCategory = $('#mainSelect').siblings('select:visible').val();
   var query = "." + parentCategory;
   if( subCategory ) {
      query += "." + subCategory;
   }  
   $('table tr').not(query).hide();
}

Предпосылка состоит в использовании селекторов классов.$('table tr').not('.topLevelCategoryB.subCategoryC') будет соответствовать только той конфигурации, где $('table tr').not('.topLevelCategoryB') - будет соответствовать всем подкатегориям.

...