2014 年 7 月 25 日星期五

在編輯器中複製按鈕

Editor 提供內建支援，用於可編輯的 DataTable 中所需的三個基本按鈕：建立、編輯和刪除。另一個特別有用的動作是能夠使用表格中現有行的值作為預設值來建立新記錄，也就是複製按鈕。當處理具有共同資訊的資料時，例如將每月發票資訊輸入付款資料庫，或追蹤團隊在整個賽季中的得分時，這可以促進快速資料輸入。

雖然 Editor 中沒有內建的複製按鈕類型，但這篇部落格文章將展示如何使用 Editor API 非常輕鬆地執行該功能，使用 TableTools 按鈕來提供使用者互動，最後建立一個可重複使用的 TableTools 按鈕外掛程式，只需添加一行程式碼，即可在您的任何表格中使用。

在這篇文章中呈現的資訊結果可以在 Editor 網站上的複製按鈕範例中看到。

複製動作

使用 Editor API 建立實際建立複製條目的程式碼實際上非常容易，只需簡單的兩個步驟操作即可

將要用作新條目基礎的行放入編輯模式（使用 edit()）。這會將欄位設定為所討論行的值。我們只需對使用者隱藏編輯表單（將第二個參數傳遞給 edit() 作為 false），然後使用 val() 從表單中讀取所有值。
現在顯示一個建立表單，並使用從步驟一讀取的值填入欄位值 - 這可以使用 create() 和 set() 方法完成。

var values = editor.edit( row, false ).val();

editor
    .create( {
        title: 'Duplicate',
        buttons: 'Create from existing'
    } )
    .set( values );

其中

editor 是要使用的 Editor 執行個體
row 是 tr 元素，其資料將用作新記錄的基礎

可以直接從該行讀取資料（row().data()），並跳過步驟 1，但是添加該步驟允許使用複雜/巢狀 JSON 資料，例如連線表格上的資料。此外，它確保上面的幾行簡單程式碼對於任何 Editor 表單都是完全可重複使用的。

請注意，由於這一切都是使用 Editor API 完成的，因此您可以執行其他任務，例如自動提交新記錄而無需使用者輸入，或將欄位設定為與原始欄位不同的值（如果存在「建立」欄位，這可能會很有用）。

TableTools 按鈕

現在我們有了基本的複製程式碼，讓我們建立一個按鈕供使用者觸發複製動作。您可以使用任何您希望觸發此動作的事件處理程式（按鍵、點擊連結等），但為了與 Editor 的三個標準 TableTools 建立、編輯和刪除按鈕保持一致，這裡我們將建立一個新的複製按鈕。

使用 TableTools 按鈕建立 DataTable 時，會傳入具有按鈕描述陣列的 tableTools 選項（aButtons）。對於 Editor，這通常看起來像

tableTools: {
    sRowSelect: "os",
    aButtons: [
        { sExtends: "editor_create", editor: editor },
        { sExtends: "editor_edit",   editor: editor },
        { sExtends: "editor_remove", editor: editor }
    ]
}

我們不限於這三個按鈕，可以添加任意數量的按鈕，定義您需要的任何動作。按鈕啟動時執行的動作由 fnClick 屬性控制，我們可以透過 sExtends 選項使用現有按鈕作為新按鈕的基礎。

這有點冗長，但可以簡化為在 aButtons 陣列中加入下面的程式碼

{
    sExtends:    "select_single",
    sButtonText: "Duplicate",
    fnClick:     function( button, conf ) {
        var node = this.fnGetSelected();

        if ( node.length !== 1 ) {
            return;
        }

        // ... perform duplicate action ...
    }
}

這裡我們擴充了 select_single 按鈕類型（僅在選取單一行時啟用），將按鈕文字設定為複製並準備一個 fnClick 函式。在 fnClick 中，我們使用 TableTools 的 fnGetSelected API 方法取得所選行的節點（我們上面複製程式碼中的 row 變數）。現在剩下的就是將上面的程式碼放入函式中！

您可以在 Editor 網站上的 Editor 複製按鈕範例中看到此程式碼的實際運行情況。

TableTools 擴充功能

最後一個任務是建立一個可重複使用的 TableTools 按鈕，可以像內建的 Editor 按鈕類型一樣輕鬆使用。這是透過將我們的新按鈕類型新增至 $.fn.dataTable.TableTools.buttons 物件，擴充現有按鈕作為範本來完成的

var buttons = $.fn.dataTable.TableTools.buttons;

buttons.editor_duplicate = $.extend( true, {}, buttons.select_single, {
    "sButtonText": 'Duplicate',
    "editor":      null,
    "fnClick":     function( button, conf ) {
        var node = this.fnGetSelected();

        if ( node.length !== 1 ) {
            return;
        }

        var values = conf.editor.edit( node[0], false ).val();

        conf.editor
            .create( {
                title: 'Duplicate',
                buttons: 'Create from existing'
            } )
            .set( values );
    }
} );

請注意，editor 變數已更新為 conf.editor - 這樣我們就可以在主腳本中建立按鈕時設定按鈕的 editor 屬性，以使按鈕知道要參照哪個 Editor 執行個體。

只需將上面的程式碼放在您的 DataTables 初始化之前的任何位置，然後您就可以像這樣建立按鈕陣列（請注意第 6 行新增的 editor_duplicate 類型）

tableTools: {
    sRowSelect: "os",
    aButtons: [
        { sExtends: "editor_create",    editor: editor },
        { sExtends: "editor_edit",      editor: editor },
        { sExtends: "editor_duplicate", editor: editor },
        { sExtends: "editor_remove",    editor: editor }
    ]
}

執行範例

如上所述，如果您想看到此程式碼的實際運行情況，Editor 網站上的範例顯示了運作中的複製按鈕。