django_tables2 & excelTableFilter 覆盖 header 雪佛龙

Question

excel表格过滤器：https://www.jqueryscript.net/table/Excel-like-Bootstrap-Table-Sorting-Filtering-Plugin.html

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

excelTableFilter 使 HTML table 比 excel 更多 search/filter/sortable，django_tables2 让您可以更好地控制 table 被呈现。

但是 excelTableFilter 中的筛选器按钮在移动设备上非常大，几乎无法调整大小。我的目标是用 excelTableFilter 中的 pop-up 菜单替换 a-z、z-a sortng 默认值 django_tables2。

经过 2-3 小时的挖掘，我的解决方案是：

（我很想得到反馈/不那么老套的解决方案）

Answer 1

JS:

首先我将 excelTableFilter 应用于我的目标 table:

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

接下来我删除了所有图标标签：

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

然后我写了一个函数来拦截对 class 'click_redirect' 的所有点击，并将它们重定向到它们树中的 'arrow-down' class 元素

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

接下来，我将 class 应用到我所有的 headers 并将它们的排序 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>

希望这能为大家节省一些时间！

django_tables2 & excelTableFilter 覆盖 header 雪佛龙

django_tables2 & excelTableFilter overwrite header chevron

javascript

python

django

jquery

django-tables2