外掛

試算表通常只會將值從一個儲存格複製到另一個儲存格，但自動填滿提供了不同的選項，可以控制如何填入資料 – 向終端使用者呈現可用的選項以供他們選擇。

內建填滿

自動填滿有四種內建填滿類型

遞增：對於數值資料，自動填滿會讓使用者選擇以遞增方式填入值。遞增的數值可以由使用者輸入，並且還提供使用負值執行遞減的選項。例如，在下面的「年齡」欄位上填滿。
填滿：原始儲存格的資料會用於所有其他儲存格
垂直填滿：選取儲存格中第一列的資料會垂直複製。例如，在下面的多個列和欄上填滿，然後選取「垂直填滿儲存格」選項。
水平填滿：選取儲存格中第一欄的資料會水平複製。例如，在下面的多個列和欄上填滿，然後選取「水平填滿儲存格」選項。

如果這些填滿類型不符合您的需求，可以使用此處描述的外掛程式建立額外的填滿。

外掛程式結構

填滿選項由附加到 $.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 ) { }
};

可用性

外掛程式必須執行的第一個操作是告訴自動填滿，填滿類型是否適合終端使用者執行的點擊和拖曳。此函式會在使用者釋放滑鼠後立即針對所有填滿類型（包括內建類型）執行。

它可讓您控制填滿是否適合套用至拖曳過的儲存格 – 例如，您的外掛程式可能僅適用於單列水平拖曳，或基於起點的特定值。

該函式會傳遞兩個參數

dt - 要填滿的表格的 DataTables API 實例
cells - 描述要填滿的儲存格的陣列。這是一個 2D 物件陣列 – 第一個陣列用於列，內部物件用於儲存格。每個物件都包含以下屬性
- cell - 問題中儲存格的 cell() 傳回值
- data - 儲存格的資料 (cell().data())，除非定義了 columns.editField，在這種情況下，會使用該值
- label（自 2.1.1 起）- 儲存格的資料 (cell().data())
- index - 儲存格的索引 (cell().index())。

傳回值為布林值：true 如果可用 - 否則為 false。

選項問題

一旦自動填滿執行完填滿類型的 available 函式並判斷出哪些可以套用以執行所需的填滿，如果有多個選項，則會詢問終端使用者他們想要做什麼（即選取填滿類型）。

option 方法會說明它如何知道如何向終端使用者呈現選項。因此，您可以簡單地傳回填滿類型名稱，或者對於更複雜的情況，要求使用者輸入資料（例如內建遞增選項的工作方式）。

該函式會傳遞兩個參數

dt - 要填滿的表格的 DataTables API 實例
cells - 描述要填滿的儲存格的陣列。請參閱上面 available 的說明。

傳回值是一個包含要向終端使用者顯示的選項的字串。這可以包含 HTML。

執行

如果使用者選取您的填滿類型，或它是唯一可用的類型，則會執行 execute 函式，而且它必須設定執行填滿的每個儲存格的值。這是透過設定儲存格物件上的 set 屬性來完成的，該屬性包含在儲存格的 2D 陣列中。

該函式會傳遞三個參數

dt - 要填滿的表格的 DataTables API 實例
cells - 描述要填滿的儲存格的陣列。請參閱上面 available 的說明。
node - 用於顯示選項的元素（來自上述 option 方法）。這允許從 DOM 取得任何使用者輸入的值。

不預期傳回值。

範例

讓我們考慮自動填滿範例中的範例。在這裡，外掛程式專門設計用於對表格第一欄中包含的資料進行操作 – 名字/姓氏欄位 – 它將姓氏從第一個儲存格複製到所有後續儲存格，但保留名字。

此程式碼如下

$.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 行：將外掛程式附加到自動填滿填滿類型物件
第 2 行：available 函式
第 5 行：檢查是否只有一欄（基於選取的第一列中的項目數），以及其中包含的儲存格是否屬於表格中的第一欄（基於索引）。
第 8 行：option 函式
第 10 行：僅顯示此填滿類型的文字。如果您在範例中的第一欄上點擊並拖曳，您會在選項清單中看到此文字出現。
第 13 行：execute 函式
第 15 行：從第一個儲存格取得資料 – 這是我們要設定的姓氏
第 17 行：迴圈處理每一列，以便我們可以設定儲存格值
第 20 行：設定儲存格物件的 set 屬性，以便自動填滿知道如何更新表格。

外掛

內建填滿

外掛程式結構

可用性

選項問題

執行

範例

DataTables