Question

我在html桌子上使用footable。虽然我可以使用搜索收件箱过滤足迹，但我想创建一个可以过滤的下拉列表。

在下拉列表中，我正在尝试创建三个（“启用”，“已禁用”，“低库存”），分别在“状态”中过滤“启用”，“已禁用”，“低库存”值'专栏。

阅读through this documentation后，我实现了以下功能（see codepen here）

  FooTable.MyFiltering = FooTable.Filtering.extend({
    construct: function(instance){
        this._super(instance);
        this.modeles = ['Enable','Disabled','Low stock'];
        this.def = 'Any Status';
        this.$status = null;
    },
    $create: function(){
        this._super();
        var self = this,
            $form_grp = $('<div/>', {'class': 'form-group'})
                .append($('<label/>', {'class': 'sr-only', text: 'Status'}))
                .prependTo(self.$form);

        self.$status = $('<select/>', { 'class': 'form-control' })
            .on('change', {self: self}, self._onStatusDropdownChanged)
            .append($('<option/>', {text: self.def}))
            .appendTo($form_grp);

        $.each(self.statuses, function(i, status){
            self.$status.append($('<option/>').text(status));
        });
    },
    _onStatusDropdownChanged: function(e){
        var self = e.data.self,
            selected = $(this).val();
        if (selected !== self.def){
            self.addFilter('status', selected, ['status']);
        } else {
            self.removeFilter('status');
        }
        self.filter();
    },
    draw: function(){
        this._super();
        var status = this.find('status');
        if (status instanceof FooTable.Filter){
            this.$status.val(status.query.val());
        } else {
            this.$status.val(this.def);
        }
    }
});

  $('.table').footable({
    components: {
        filtering: FooTable.MyFiltering
    }
});

即使添加上述javascript，过滤器也不会显示。

Answer 1

This document演示了如何触发自定义过滤器并查看codepen here

可以使用以下jquery：

$( "#enable_button" ).click(function() {
   $('.footable').trigger('footable_filter', {filter: "Enable"});
});

$( "#disable_button" ).click(function() {
   $('.footable').trigger('footable_filter', {filter: "Disabled"});
});

$( "#low_button" ).click(function() {
   $('.footable').trigger('footable_filter', {filter: "Low stock"});
});

如何使用jquery-footable创建过滤器下拉列表？

1 个答案: