django_tables2 & excelTableFilter перезаписывают заголовок chevron - PullRequest
Новая
       9

django_tables2 & excelTableFilter перезаписывают заголовок chevron

0 голосов
/ 29 марта 2019

excelTableFilter: https://www.jqueryscript.net/table/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin.html

django_tables2: https://github.com/jieter/django-tables2

excelTableFilter делает таблицы HTML более поисковыми / фильтрующими / сортируемыми, как Excel, django_tables2 дает вам больше контроля над тем, как таблица отображается.

НО кнопка фильтра в excelTableFilter очень велика для мобильных устройств и едва ли имеет значительный размер. Моя цель состояла в том, чтобы заменить a-z, z-a sortng по умолчанию django_tables2 на всплывающее меню из excelTableFilter.

После 2-3 часов копания было мое решение:

(я хотел бы получить обратную связь / менее хакерские решения)

1 Ответ

0 голосов
/ 29 марта 2019

JS:

Сначала я применил excelTableFilter к целевой таблице: 

<script>
  $('#workorder_table').excelTableFilter();
</script>

Затем я удалил все теги значков: 

<script>
  $('.glyphicon').removeClass('glyphicon-arrow-down')
  $('.glyphicon').removeClass('dropdown-filter-icon')
  $('.glyphicon').addClass('glyphicon-filter');
</script>

Затем я написалфункция для перехвата всех нажатий в классе «click_redirect» и перенаправления их на элемент класса «стрелка вниз» в их дереве 

<script>
  $(document).on('click', '.click_redirect', function(event) {
    event.stopPropagation();
    $(event.target).parent().find('.arrow-down')[0].click();
  });
</script>

Затем я применяю этот класс ко всем своим заголовкам и заменяюих URL сортировки с # 

<script>
  function update_djheaders(param) {
    param.setAttribute("class", "click_redirect");
    param.setAttribute("href", "#");
  };

  $.each($("th.orderable a"), function(i,l) {update_djheaders(l)});
</script>

CSS:

Наконец, я применяю следующий CSS, чтобы скрыть значок 

<style>
  .arrow-down {
    display:none !important;
  }
</style>

Надеюсь, этосэкономит вам время!

...