FooTable高级教程：实现自定义下拉筛选功能-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00778/article/details/148891425

FooTable高级教程：实现自定义下拉筛选功能

前言

在现代Web应用中，数据表格是展示信息的重要组件。FooTable作为一款功能强大的响应式表格插件，提供了丰富的扩展能力。本文将深入讲解如何在FooTable中实现自定义下拉筛选功能，帮助开发者提升表格的交互体验。

功能概述

下拉筛选是一种常见的表格交互方式，它允许用户通过下拉菜单快速筛选特定列的数据。与基础搜索框相比，下拉筛选更适合预定义选项的场景，如状态筛选（活跃/禁用/暂停等）。

实现步骤详解

1. 继承基础过滤组件

FooTable采用面向对象设计，所有核心类都继承自FooTable.Class。我们首先需要继承基础过滤组件：

FooTable.MyFiltering = FooTable.Filtering.extend({
  construct: function(instance){
    this._super(instance); // 调用父类构造函数
  }
});

这里使用extend方法创建新类，_super调用父类方法，这是典型的JavaScript继承模式。

2. 添加自定义属性

为增强代码可维护性，我们添加三个关键属性：

FooTable.MyFiltering = FooTable.Filtering.extend({
  construct: function(instance){
    this._super(instance);
    this.statuses = ['Active','Disabled','Suspended']; // 下拉选项
    this.def = 'Any Status'; // 默认选项
    this.$status = null; // 存储jQuery下拉元素
  }
});

3. 创建下拉DOM元素

重写$create方法，构建下拉菜单并插入到表格：

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

这段代码：

创建包含标签的表单组
添加select元素并绑定change事件
填充选项数据

4. 处理下拉变更事件

实现_onStatusDropdownChanged方法处理用户选择：

_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(); // 执行过滤
}

逻辑说明：

非默认选项：添加状态过滤
默认选项：移除状态过滤
最后执行实际过滤操作

5. 同步下拉状态

重写draw方法保持下拉与过滤状态同步：

draw: function(){
  this._super(); // 调用父类draw方法
  
  var status = this.find('status');
  if (status instanceof FooTable.Filter){
    this.$status.val(status.query.val());
  } else {
    this.$status.val(this.def);
  }
}

6. 注册自定义组件

最后决定组件作用范围：

全局注册（所有表格）：

FooTable.components.register('filtering', FooTable.MyFiltering);

局部注册（特定表格）：

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

完整实现代码

FooTable.MyFiltering = FooTable.Filtering.extend({
  construct: function(instance){
    this._super(instance);
    this.statuses = ['Active','Disabled','Suspended'];
    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);
    }
  }
});