多列引导表过滤器

Question

我用的是文志新的“鞋带表”。我需要用几列过滤。例如，我需要过滤国家，然后是城市。

表中的每个字段有两个选择字段(和select )。

我现在所做的方法是将filterBy方法应用于select选项的更改：

    $('#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

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

• 示例
• Github项目

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)
        }
    }

然后，对于我们的每个select字段，我们将创建一个函数，根据所选内容向我们的FilterOptions对象添加/更改属性，或者如果选择默认选项(本例中为“all”)，则删除该属性。最后，我们使用FilterTable()函数对表进行筛选。

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