Побочный эффект фильтра поиска в таблице JQuery: запутанная навигация из-за неопределенности строк - PullRequest
Новая
       12

Побочный эффект фильтра поиска в таблице JQuery: запутанная навигация из-за неопределенности строк

0 голосов
/ 01 октября 2018

В настоящее время я разрабатываю табличное представление для визуализации и изменения складских запасов.Требования следующие: сортировка, поиск и навигация по боковым кнопкам (быстро вверх, вверх, вниз, быстро вниз).Поэтому я реализовал таблицу и заполнил ее данными.Сама сортировка и поиск работают нормально, но когда дело доходит до навигации с активным поисковым ключевым словом, элементы управления перепутаны.

Функция поиска работает следующим образом: я перебираю строки таблицы и ".hide ()" все строки, которые не соответствуют условию ключевого слова.Но теперь, поскольку значения строк в таблице остаются неизменными, моя навигация нарушена.

РЕДАКТИРОВАТЬ: здесь скрипка моей функции поиска и кнопок навигации для лучшего понимания: 

$(document).ready(function (e) {
  var currPos = 0;
  refreshFocused(); 
  $('.table-articles-row').click(function() {
    currPos = $(this).index();
    refreshFocused();
  });
  $('#btn-fast-up').click(function() {
		var firstVisible = $('.table-articles-row:visible:first');
		currPos = $(firstVisible).index();
		refreshFocused();
  });  
  $('#btn-up').click(function() {
    var above = $('.active').closest('.table-articles-row').prevAll('.table-articles-row:visible').first();
    currPos = $(above).index();
    refreshFocused();
  });   
  $('#btn-down').click(function() {
    var beneath = $('.active').closest('.table-articles-row').nextAll('.table-articles-row:visible').first();
    currPos = $(beneath).index();
    refreshFocused();
  }); 
  $('#btn-fast-down').click(function() {
		var lastVisible = $('.table-articles-row:visible:last');
		currPos = $(lastVisible).index();
		refreshFocused();
  });
  $("#btn-search").click(function () {
    var value = $("#ed-search").val();
		$(".table-articles-row").filter(function () {
		  $(this).toggle($(this).text().toLowerCase().indexOf(value.toLowerCase()) > -1);
		});
		currPos = 0;
		refreshFocused();
	});
  function refreshFocused() {
    $('.table-articles-row').removeClass('active');
    var focusedRow = $('.table-articles-row:visible').eq(currPos);
    focusedRow.addClass('active');
    $(focusedRow)[0].scrollIntoView({
					behavior: "smooth", 
					block: "center" 
		});
  }
});
* {
  font-family: 'Calibri';
}
html, body {
  overflow: hidden;
  background: lightgray;
}
.table-wrapper {
  width: 50vh;
  margin: 20vh auto;
  height: 40vh;
  background: lightgray;
}
.table-content {
  width: 40vh;
  height: 30vh;
  float: left;
  background: lightgreen;
  overflow: hidden;
}
.table {
  width: 40vh;
}
.table thead th {
  position: sticky;
	top: 0;
	background: rgba(255,255,255,1) !important;
	padding: 0;
  height: 7.5vh;
  border: 1px solid lightgreen;
}
.table tbody td {
  background: rgba(79,129,12,0.5) !important;
  padding: 0;
  height: 2.5vh;
}
.table-controls {
  width: 10vh;
  height: 30vh;
  float: left;
}
.table-nav-btn {
  width:10vh;
  height: 7.5vh;
  background: #fff;
  border: 1px solid lightgreen;
  font-weight: bold;
}
.table-search {
  width: 50vh;
  height: 10vh;
  float: left;
  background: #fff;
  border: 1px solid lightgreen;
  border-radius: 5px/5px;
  text-align: center;
}
.search-text-input,
.search-confirm-btn {
  width: 100%;
  height: 5vh;
  text-align: center;
}

.search-confirm-btn {
  background: lightgreen;
  border: none;
}

.active {
  background: rgba(79,129,12,0.8) !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-wrapper">
  <div class="table-content">
    <table class="table">
      <thead>
        <tr class="table-head-row">
          <th class="table-head-col">Beschreibung</th>
          <th class="table-head-col">Anzahl</th>
          <th class="table-head-col">Maßeinheit</th>
          <th class="table-head-col">Preis</th>
        </tr>
      </thead>
      <tbody>
        <tr class="table-articles-row">
          <td class="table-articles-col">Beer</td>
          <td class="table-articles-col">2,00</td>
          <td class="table-articles-col">Bot.</td>
          <td class="table-articles-col">1,90</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Ice cream</td>
          <td class="table-articles-col">4,00</td>
          <td class="table-articles-col">Pc.</td>
          <td class="table-articles-col">1,30</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Golden Toast</td>
          <td class="table-articles-col">6,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">0,60</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Fit Toast</td>
          <td class="table-articles-col">4,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">0,79</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Root beer</td>
          <td class="table-articles-col">10,00</td>
          <td class="table-articles-col">Bot.</td>
          <td class="table-articles-col">3,50</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Snack Sausage</td>
          <td class="table-articles-col">5,00</td>
          <td class="table-articles-col">Pc.</td>
          <td class="table-articles-col">3,90</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Bacon</td>
          <td class="table-articles-col">12,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">2,20</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Coca Cola 0,25l</td>
          <td class="table-articles-col">24,00</td>
          <td class="table-articles-col">Bot.</td>
          <td class="table-articles-col">1,30</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Fanta 0,25L</td>
          <td class="table-articles-col">21,00</td>
          <td class="table-articles-col">Bot.</td>
          <td class="table-articles-col">1,30</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Sprite 0,25L</td>
          <td class="table-articles-col">12,00</td>
          <td class="table-articles-col">Bot.</td>
          <td class="table-articles-col">1,30</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Hawaii Toast Set</td>
          <td class="table-articles-col">8,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">10,89</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Root Beer Plus</td>
          <td class="table-articles-col">4,00</td>
          <td class="table-articles-col">Bot.</td>
          <td class="table-articles-col">4,20</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Snack Cheese Stick</td>
          <td class="table-articles-col">9,00</td>
          <td class="table-articles-col">Pc.</td>
          <td class="table-articles-col">0,90</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">McKenzy Fries</td>
          <td class="table-articles-col">2,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">3,40</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Jalapenos</td>
          <td class="table-articles-col">17,00</td>
          <td class="table-articles-col">Jar.</td>
          <td class="table-articles-col">4,70</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Ketchup</td>
          <td class="table-articles-col">12,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">0,35</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Mustard</td>
          <td class="table-articles-col">7,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">0,35</td>  
        </tr>
         <tr class="table-articles-row">
          <td class="table-articles-col">Pizza</td>
          <td class="table-articles-col">19,00</td>
          <td class="table-articles-col">Pc.</td>
          <td class="table-articles-col">2,79</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Playing cards</td>
          <td class="table-articles-col">3,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">5,80</td>  
        </tr>
        <tr class="table-articles-row">
          <td class="table-articles-col">Marlboro 27 pc.</td>
          <td class="table-articles-col">12,00</td>
          <td class="table-articles-col">Pck.</td>
          <td class="table-articles-col">8,00</td>  
        </tr>
      </tbody>
    </table>
  </div>
  <div class="table-controls">
    <button id="btn-fast-up" class="table-nav-btn">Fast up</button>
    <button id="btn-up" class="table-nav-btn">Up</button>
    <button id="btn-down" class="table-nav-btn">Down</button>
    <button id="btn-fast-down" class="table-nav-btn">Fast Down</button>
  </div>
  <div class="table-search">
    <input id="ed-search" type="search" class="search-text-input" placeholder="Search ..."/> 
    <input id="btn-search" type="button" class="search-confirm-btn" value="Apply search"/>
  </div>
</div>

Разметка таблицы html довольно проста.Просто обычная разметка таблицы с таблицей, thead, tr, th, tbody, tr и td.Ничего особенного.

У кого-нибудь есть идея, как правильно "игнорировать" невидимые элементы или, возможно, перестроить кнопки навигации, чтобы обеспечить правильную навигацию по строкам, даже если поиск активен?

С уважением

1 Ответ

0 голосов
/ 02 октября 2018

Я нашел решение.

Проблема возникла из-за фильтра «: visible» при выборе текущей строки в «refreshFocused ();»

.eq, похоже, проблема со скрытыми элементами.

...