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中的过滤器按钮在移动设备上非常大,而且几乎没有大小。我的目标是用excelTableFilter的弹出菜单替换django_tables2的a-z,z -a sortng默认值。
经过2-3个小时的挖掘,这是我的解决方案:
(我很想得到反馈/更少的hacky解决方案)
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”的所有点击,并将它们重定向到树中的'arrow-down'类元素
<script>
$(document).on('click', '.click_redirect', function(event) {
event.stopPropagation();
$(event.target).parent().find('.arrow-down')[0].click();
});
</script>
接下来,我将该类应用于我的所有标头,并用#替换他们的排序网址
<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>
希望这能节省你所有的时间!