Question

我正在使用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});              
        }
    });

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

谢谢！

Answer 1

我建议您使用bootstrap-table扩展过滤器控制。

Answer 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对象添加/更改属性，或者如果选择了默认选项（在此示例中为“ all”），则删除该属性。最后，我们使用FilterTable（）函数过滤表。

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

Bootstrap表按多列筛选

2 个答案: