引导表按多列过滤答案

【问题标题】：Bootstrap Table Filter by Multiple Columns引导表按多列过滤
【发布时间】：2016-09-29 21:09:57
【问题描述】：

我正在使用 wenzhixin 的 Bootstrap Table。我需要按几列过滤。例如，我需要过滤国家和城市。

表中的每个字段都有两个选择字段（选择国家和选择城市）。

我现在的做法是在更改选择选项时应用 filterBy 方法：

    $('#countries-list').on('change', function (evt) {
        var selectedCountry = $('#countries-list').select2('val');
        if (selectedCountry == "all") {
            $tableFilter.bootstrapTable('filterBy');
        } else {
            $tableFilter.bootstrapTable('filterBy', {country: selectedCountry});                
        }
    });

    $('#cities-list').on('change', function (evt) {
        var selectedCity = $('#cities-list').select2('val');
        if (selectedCity == "all") {
            $tableFilter.bootstrapTable('filterBy');
        } else {
            $tableFilter.bootstrapTable('filterBy', {city: selectedCity});              
        }
    });

问题是它们相互覆盖。对于如何将第二个过滤器仅应用于第一个过滤器的结果而不是整个数据集的任何建议，我将不胜感激。

谢谢！

【问题讨论】：

我使用角度 ng-repeat 和自定义过滤器创建了表格。所有过滤器现在都可以工作，但仍有一些其他问题......所以，如果你想出一个解决方案，现在分享还为时不晚；）谢谢！

标签： bootstrap-table

【解决方案1】：

我建议你使用引导表扩展Filter-Control。

【讨论】：

感谢您的链接！我实际上已经尝试过了，很好的扩展！问题是我的利益相关者希望过滤器的输入字段看起来与表格不同。我不知道如何使用仅位于页面上的输入字段来完成这项工作，而不是在表格的标题中。希望这是有道理的:)

【解决方案2】：

相当老的问题，但我今天只是在同样的事情上苦苦挣扎，只是想出了一个解决方案。

设置需要的变量：

var $table = $('#table-id')
var FilterOptions = {}

创建一个函数来检查一个对象是否为空：

function isEmpty(obj) {
        for(var key in obj) {
            if(obj.hasOwnProperty(key))
                return false;
        }
        return true;
    }

在我们的 isEmpty() 函数的帮助下创建一个过滤表格的函数：

function FilterTable(){
        if(isEmpty(FilterOptions)){
            $table.bootstrapTable('filterBy', {})
        } else {
            $table.bootstrapTable('filterBy', FilterOptions)
        }
    }

然后，对于我们的每个选择字段，我们将创建一个函数，根据选择的内容向 FilterOptions 对象添加/更改属性，如果选择了默认选项（在本例中为“全部”），则删除该属性。最后，我们使用 FilterTable() 函数过滤表格。

$('#Selector_column1_filter').change(function(){
        if ($(this).val() != "all") {
            FilterOptions.column1 = $(this).val();
        } else {
            delete FilterOptions.column1;
        }
        FilterTable();
    })

【讨论】：