Сортировка большой таблицы с полем выбора с помощью JQuery - PullRequest
Новая
       4

Сортировка большой таблицы с полем выбора с помощью JQuery

0 голосов
/ 22 декабря 2010

У меня действительно большая таблица (около 32 столбцов и более 1000 строк), которую я пытаюсь отфильтровать с помощью раскрывающегося списка.

Таблица имеет относительно стандартный формат (этот был отредактирован для простоты): 

<div id="SearchResults">
<table>
<thead>
<tr>
<th>Report Name</th>
<th>xxxxx Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sales_Report_Week_#</td>
<td>Sales Volume</td>
</tr>
</tbody>
</table>

Раскрывающееся окно уже собрано так: 

<select name="Report_Name_Drop" id="id_dropdown"> 
<option>xxxxx1</option>
<option>xxxxx2</option> 
<option>xxxxx3</option>
<option>xxxxx4</option> 
<option>xxxxx5</option> </select>

К сожалению, я работаю в строго закрытой среде sharepoint, что означает, что я не могу использовать какие-либо плагины. Мне просто нужно скрыть все строки, которые не соответствуют значению в раскрывающемся списке, но я не могу ни ради любви, ни за деньги понять, как!

Любая помощь будет принята с благодарностью!

Спасибо

Джеймс

Ответы [ 2 ]

1 голос
/ 22 декабря 2010

Попробуйте что-нибудь подобное. По сути, я создаю набор значений в столбце фильтра и добавляю эти значения в раскрывающийся список <select>. Затем, когда этот раскрывающийся список меняется, я скрываю / показываю соответствующие строки в таблице. Этот шаблон может быть расширен, чтобы включить несколько фильтров по мере необходимости, просто протестируйте все соответствующие столбцы для всех соответствующих элементов <select>. 

<!DOCTYPE HTML>
<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">
    $(function() {
        var vals = {};
        $('tbody tr').each(function(i){
            var t = $(this).find('td:first-child').text();
            vals[t] = t;
        });
        $.each(vals, function() {
            $('select').append($('<option value="' + this +'">' + this +'</option>'));
        });
        $('select').change(function() {
            var val= $(this).val();
            if (val != '-') {
              $('tbody tr').each(function(i){
                  if ($(this).find('td:first-child').text() != val) {
                    $(this).hide();
                  } else {
                    $(this).show();
                  }
              });
            } else {
              $('tbody tr').each(function(i){
                  $(this).show();
              });
            }
        });
    });
    </script>
  </head>
  <body>
    <select><option value="-"> === Filter === </option></select>
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Mark</td><td>12</td></tr>
        <tr><td>Mark</td><td>1</td></tr>
        <tr><td>Daryl</td><td>2</td></tr>
        <tr><td>Larry</td><td>122</td></tr>
        <tr><td>Kevin</td><td>132</td></tr>
        <tr><td>Larry</td><td>1232</td></tr>
        <tr><td>Kevin</td><td>1432</td></tr>
      </tbody>
    </table>

  </body>
</html>
0 голосов
/ 22 декабря 2010

Не зная природу фильтра, который вы пытаетесь создать, я обычно советую управлять этим с помощью данных, хранящихся в объекте или массиве объектов (по одному для каждой строки).Это может выглядеть примерно так: 

var data = {
    filters: ['filter value 1', 'filter value 2', ...],
    rows: [{name:'row name', week:1, year:2010, sales_volume:4564}, {...}, ...]
}

И так ... всякий раз, когда ваш пользователь выбирает индекс в вашем выборе, вы можете воссоздать таблицу, выполнив проверку по sales_volume или name илиyear или любой другой индекс.Это выглядело бы примерно так: 

var selectedFilter = $('#id_dropdown').val();

$.each(data, function(ind, el) {
    if (el.name == selectedFilter)
        //write the row to your table
    else
        return true; //continue to next index
});

Но без дополнительной информации трудно помочь намного, кроме общих советов.

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

Нет похожих вопросов

...