2017 年 6 月 30 日星期五

永遠可見的編輯面板

當您使用軟體函式庫時，您希望它能融入您的網站和設計，而不是強迫您接受它的思考方式。這種理念深深地融入了 DataTables 和 Editor 中，它們能夠透過各種流行的 CSS 框架進行樣式設定，就證明了這一點。特別是 Editor，從一開始就被設計成具有彈性，能夠融入您的應用程式。

Editor 中編輯表單的預設模式是使用模態視窗（有時也稱為燈箱）。對於終端使用者來說，這可能是一個有用的介面範例，因為它提供了資料存取和資料寫入之間的分隔 - 它看起來就像不同的圖層。缺點是因為表單覆蓋在頁面的其餘部分，您可能會失去正在編輯的資料的上下文。這並不總是問題，但在複雜的應用程式中，使用者在編輯列時能夠參考其他資料點可能會很有用。

為此，關於 Editor 的一個常見問題是，它是否能夠在頁面上一個專用的區域中顯示其表單，而不是在模態視窗中，而是與其他內容並排顯示。當然，這是可能的！以下範例說明了這一點。在這篇文章中，我將說明這個範例是如何組合起來的。

範例

名稱	薪資
名稱	薪資

選取一個列
來編輯或刪除

或新增一個列

這個範例顯示一個只有兩欄的 DataTable，以及它右側的一個輸入區域。由於這篇部落格文章的水平寬度限制，表格只顯示兩欄，但在實際的應用程式中，可以使用任何大小的表格。表格和表單區域之間的空間是均分的。

點擊一個列，您將能夠看到該列的資料立即以可編輯的狀態顯示在表單中。這裡有按鈕可以儲存任何變更，也可以刪除該列。當列被取消選取時，表單區域的原始內容會再次顯示，以及一個用於輸入新列資料的連結，該連結將在該位置顯示「建立」表單。

若要查看這些範例使用的完整 Javascript 和 CSS（請注意，它們包含一些小的客製化，使其適合此顯示），請參閱

顯示控制器

雖然 Editor 的預設顯示方式是在模型中顯示表單，但實際上很容易告訴它在其他地方顯示表單。控制表單顯示位置的程式碼，在 Editor 中稱為顯示控制器。它有三個要執行的功能

初始化 - 正在建立 Editor 執行個體，並告知顯示控制器它將用於該 Editor。
顯示表單 - 當 Editor 想要顯示表單時，它會告訴顯示控制器，並傳入一個包含表單的元素。
隱藏表單 - 一旦編輯完成或表單被取消，Editor 會要求顯示控制器關閉表單。

透過這三個簡單的操作，您可以在您想要的任何地方顯示 Editor 表單；另一個元素（如此處所示）、Bootstrap 模態視窗、子列，甚至您可以選擇新視窗。

初始化

這個外掛程式的初始化可能是這段程式碼中最有趣的部分。我們需要考慮頁面上有多個 Editor 的情況，並且每個 Editor 都會在不同的容器元素中顯示自己的表單。因此，我們不是像手冊中所述那樣簡單地使用靜態顯示控制器名稱，而是使用一個函式，我們可以在其中傳入我們想要顯示表單的元素，它會產生一個隨機名稱，可用於 Editor 的 displayController 屬性。這利用了 Javascript 使用閉包的能力 - 即保留封閉函式中的值。

function onPageDisplay ( elm ) {
    var name = 'onPage'+Math.random();
    var Editor = $.fn.dataTable.Editor;
    var emptyInfo;

    Editor.display[name] = $.extend( true, {}, Editor.models.display, {
        init: function ( editor ) {
            emptyInfo = elm.html();
            return Editor.display[name];
        }
    } );

    return name;
}

請注意，該函式將以標準方式建立顯示控制器外掛程式（將其附加到 $.fn.dataTable.Editor.display），並具有外掛程式所需的標準屬性。上面顯示的是 init 函式 - open 和 close 在下面。

這裡唯一需要的初始化是確保我們擁有表單顯示區域中已存在的 HTML 的複本。這是為了在取消選取列時可以還原它。

顯示表單

在 open 函式中顯示表單是很簡單的。我們只需移除任何存在的內容（請注意使用 $().detach()，它將保留指定給容器中元素的事件處理程式），並附加 Editor 已建立的表單。如果有回呼函式，則應在表單準備好時呼叫它（這對於動畫等很有用）。

// Show the form
open: function ( editor, form, callback ) {
    elm.children().detach();
    elm.append( form );

    if ( callback ) {
        callback();
    }
},

隱藏表單

隱藏表單（即在此範例中取消選取列時），與 open 情況一樣簡單 - 只需移除內容，然後插入原始內容即可。同樣，如果有回呼，則觸發它。

// Hide the form
close: function ( editor, callback ) {
    elm.children().detach();
    elm.html( emptyInfo );

    if ( callback ) {
        callback();
    }
}

完整外掛程式碼

雖然以上顯示了此顯示控制器外掛程式所需的所有程式碼，但它確實需要組裝。若要查看具有可用程式碼的完整外掛程式，請參閱此頁面。

事件處理

我們現在可以使用大多數 Editor 範例中顯示的標準編輯按鈕 - 即表格上方顯示的新增、編輯和刪除，並宣告完成。它可以運作，但它並不太符合表單可立即存取的核心概念。

相反，我們要做的是在表格中選取列時顯示表單。

觸發編輯

當 DataTable 中選取列時（透過 Select 擴充功能），會觸發 select 事件 - 此時，我們要對選取的列呼叫 edit()（使用 rows().indexes() 取得所有選取的列，而不僅僅是最新選取的列，這允許進行多列編輯）。同樣地，當取消選取列時，我們會想要呼叫 close()

table
    .on( 'select', function () {
        var indexes = table.rows({selected:true}).indexes();

        editor.edit( indexes, {
            title: 'Edit row'
        } );
    } )
    .on( 'deselect', function () {
        editor.close();
    } );

刪除列

當選取列時，對於此範例，我們希望表單不僅以編輯狀態顯示該列和儲存按鈕，還希望顯示刪除按鈕，以便可以從表格中移除該列。我們可以透過傳遞給 edit() 的 form-options 物件的 buttons 參數來執行此操作（例如，上面使用 title 參數的物件）。這反過來又使用了 buttons() 方法。

從程式碼理解比從文字理解幾乎更容易 - 查看下面的程式碼，它定義了兩個按鈕 - 第一個只是文字，因此它執行儲存表單的標準 Editor 操作（例如 submit()）。第二個按鈕有一個函式 (fn)，當按鈕被啟動時會呼叫該函式。在這種情況下，它會呼叫 remove() 來設定刪除動作，然後立即提交它

buttons: [
    'Save changes',
    {
        label: 'Delete',
        fn: function () {
            editor
                .remove( indexes, false )
                .submit();
        }
    }
]

建立新列

剩下唯一要做的事是提供一種建立新列的方法。為此，我們只需在我們放入頁面中以建立新列的文字上使用標準 jQuery 點擊事件監聽器，並呼叫 create() 方法。

在下面的程式碼中，再次使用了 buttons 參數，在此情況下是除了儲存按鈕之外還新增一個取消按鈕。

$('#form-container').on( 'click', 'p.add-new', function (e) {
    e.preventDefault();

    editor.create( {
            title: 'Create new row',
            buttons: [
                'Save',
                {
                    label: 'Cancel',
                    fn: function () {
                        editor.close();
                    }
                }
            ]
    } );
} );

盡情客製化！

Editor 和 DataTables 的設計都是為了讓您能夠盡快輕鬆上手。畢竟，函式庫軟體的重點是節省您的開發時間，讓您可以繼續處理其他事情！但是，您不必只使用預設選項 - 它們應該並且可以根據您的需要融入您的應用程式中。

透過使用 API 和一些基本的 Javascript，您可以客製化這些函式庫以滿足您的需求。