插件

通常情况下，电子表格只能将一个单元格的值复制到另一个单元格，但自动填充提供了不同的数据填充选项，用户可以选择已有的选项。

内置填充

自动填写有四种内置填充类型

• 递增：对于数字数据，自动填充将为用户提供在填充数据时递增该值的选择。递增的量可以由用户输入，也提供使用负值执行递减的选择。例如，填写下面的年龄列。
• 填充：原始单元格中的数据用于填充所有其他单元格
• 垂直填充：复制所选单元格中第一行的数据纵向填充。例如，在下面的多行多列上填充，并选择垂直填充单元格选项。
• 水平填充：复制所选单元格中第一列的数据横向填充。例如，在下面的多行多列上填充，并选择水平填充单元格选项。

如果这些填充类型不符合你的要求，可以使用插件创建其他填充，如此处所述。

插件结构

通过附加到 $.fn.dataTable.AutoFill.actions 对象的插件提供填充选项。此对象中的每个属性必须是一个提供三个函数的对象

• available - 确定用户拖动要填充的数据是否适合这种填充类型
• option - 如果要使用此填充类型，则返回一个将询问用户的问题
• execute - 如果选择了此填充类型，则修改数据

因此，典型的插件将具有此结构

$.fn.dataTable.AutoFill.actions.myPlugin = {
    available: function ( dt, cells ) { },
 
    option: function ( dt, cells ) { },
 
    execute: function ( dt, cells, node ) { }
};

可用性

插件必须执行的第一个操作是告诉自动填充填充类型是否适合最终用户执行的点击并拖动。此函数在用户释放鼠标后立即对所有填充类型（包括内置类型）执行。

它允许你控制填充类型是否适合应用于被拖动的单元格 - 例如，插件可能只适用于单行水平拖动，或基于起点特定的值。

向函数传递两个参数

1. dt - 正在填充的表的 DataTables API 实例
2. cells - 描述要填充的单元格的数组。这是一个包含对象 的二维数组 - 行的第一个数组和单元格的内部对象。每个对象包含以下属性
   • cell - cell() 为相关单元格返回的值
   • data - 单元格数据 (cell().data()），除非已定义 columns.editField，在这种情况下将使用该值
   • label（自 2.1.1 起） - 单元格数据 (cell().data())
   • index - 单元格索引 (cell().index()).

返回值为布尔值：可用时为 true；否则为 false。

选项问题

一旦 AutoFill 遍历完成填充类型 available 函数，并确定其中哪些可用于执行所需的填充，如果有多个选项，它将询问最终用户要执行的操作（即选择填充类型）。

option 方法了解如何向最终用户显示该选项。因此，你可以直接返回填充类型名称，或者对于更复杂的情况，可以请求用户输入数据（例如内置增量选项的工作方式）。

向函数传递两个参数

1. dt - 正在填充的表的 DataTables API 实例
2. cells - 描述要填充的单元格的数组。请参见上文内容中对 available 的描述。

返回值为一个字符串，其中包含要向最终用户显示的选项。其中可以包含 HTML。

执行

如果用户选择了你的填充类型或该填充类型是唯一可用的选项，execute 函数将会运行，并且它必须为已在其上执行填充的所有单元格设置值。这是通过设置单元格对象（包含在单元格的 2D 数组中）上的 set 属性来完成的。

该函数传递了三个参数

1. dt - 正在填充的表的 DataTables API 实例
2. cells - 描述要填充的单元格的数组。请参见上文内容中对 available 的描述。
3. node - 用于显示选项的元素（来自上述 option 方法）。这允许从 DOM 中获取所有用户输入值。

没有预期的返回值。

示例

让我们考虑一下来自 AutoFill 示例 中的示例。在此，该插件专门设计用于处理表中第一列中所包含的数据 - 名字 / 姓氏字段 - 它将第一个单元格中的姓氏复制所有后面的单元格，但保留名字。

其代码如下

$.fn.dataTable.AutoFill.actions.names = {
    available: function ( dt, cells ) {
        // Only available if a single column is being
        // filled and it is the first column
        return cells[0].length === 1 && cells[0][0].index.column === 0;
    },
 
    option: function ( dt, cells ) {
        // Ask the user if they want to change the surname only
        return 'Fill only surname - retain first name';
    },
 
    execute: function ( dt, cells, node ) {
        // Modify the name and set the new values
        var surname = cells[0][0].data.split(' ')[1];
 
        for ( var i=0, ien=cells.length ; i<ien ; i++ ) {
            var name = cells[i][0].data.split(' ');
 
            cells[i][0].set = name[0]+' '+surname;
        }
    }
};

逐行查看

• 第 1 行：将插件附加到 AutoFill 填充类型对象
• 第 2 行：available 函数
• 第 5 行：检查是否仅有一列（基于所选第一行的项数）以及其中包含的单元格是否属于表中的第一列（基于索引）。
• 第 8 行：option 函数
• 第 10 行：仅仅是显示此填充类型的文本。如果你在示例中的第一列上单击并拖动，你将在选项列表中看到此文本出现。
• 第 13 行：execute 函数
• 第 15 行：从第一个单元格中获取数据 - 这是我们要设置的姓氏
• 第 17 行：遍历每一行，以便我们可以设置单元格值
• 第 20 行：设置单元格对象的 set 属性，以便 AutoFill 了解如何更新表格。