2015 年 9 月 11 日，星期五

多行批量編輯

Editor 1.5 已經推出將近一個月了，雖然新功能已記錄在發行說明中，並顯示在範例頁面上，但我還是想用幾篇部落格文章，透過程式碼範例來深入探討其中一些新功能。這對於那些從先前版本升級的使用者，以及對查看 Editor 的功能集感興趣的人來說，都會有所幫助。

Editor 1.5 中有三個主要的新功能

多行（批量）編輯
伺服器端事件
資料提交控制

多行（批量）編輯

一次編輯單行資料對於許多使用情境來說是完美的，而 Editor 的設計旨在盡可能簡化此操作，但同時更新多行中的值也可以節省大量的時間 - 例如，將待辦事項清單中的項目標記為「完成」或重新分類資料庫中的項目。

Editor 1.5 開箱即支援多行編輯 - 無需指定其他選項。此外，您的終端使用者看到的介面與單行介面幾乎相同，因此他們會立即感到熟悉。使用者只需在表格中選擇多行即可，他們可以使用 cmd/ctrl 和 shift 點擊表格來做到這一點。如果您想嘗試一下，Editor 網站上的所有範例都支援多行編輯。

介面

在考慮多行編輯時，一個重要的重點是允許某些欄位保留其個別值，同時允許其他欄位設定為跨行的通用值。例如，考慮一個零件資料庫，您希望為多個項目新增標籤 - 零件編號和描述不應變更，但標籤欄位應變更。

當使用者選擇要編輯的多行時，Editor 會稍微修改其顯示方式，以顯示具有不同值的欄位；它會顯示「多個值」訊息，並邀請使用者點擊該訊息（如果他們希望編輯該欄位）。如果他們不點擊，則會保留個別欄位值。如果他們點擊，則會為所有正在編輯的行設定一個通用值。如果使用者不小心點擊了欄位，他們也可以選擇還原個別值。

API

Editor 的預設介面允許快速批量編輯表格中的項目，但當您使用 API 進行多行編輯時，它會變得非常有趣。雖然 UI 允許保留原始值或設定通用值，但 API 也提供了為每行中的每個欄位設定個別值的能力。

此 API 引入了呈現有用的批量編輯工具的能力，例如自動填入資料和重新排序行給終端使用者，而且只需要您撰寫幾行程式碼即可。

您也可以使用 API 開發自己的批量編輯工具。Editor 為此類互動提供了以下方法

multiGet() - 取得一個或多個欄位的欄位值
multiSet() - 設定一個或多個欄位的欄位值
field().multiGet() - 取得一或多行的欄位值
field().multiSet() - 設定一或多行的欄位值
field().isMultiValue() - 判斷該欄位對於正在編輯的行是否具有個別值

為了說明這一點，請考慮一個客戶表格，其中將顯示每個客戶的財務資訊，包括貨幣匯率。表格的 Editor 實例有一個名為 exchange-rate 的欄位，我們希望使用新值更新它。

若要編輯選取的行並設定一個通用值，我們可以使用欄位上的 set() 方法

var rate = 1.41459; // Could come from an API, or user input

editor
    .edit( table.rows( { selected: true } ).indexes() )
    .set( 'exchange-rate', rate )
    .submit();

請注意，使用 rows( { selected: true } ) 取得選取的行。這是 Select 擴充套件的功能。

現在考慮我們可能希望為客戶的匯率新增佣金，其中佣金由表格中的另一個欄位 commission 定義。佣金值現在對於每個客戶來說都是唯一的，我們需要循環遍歷每一行，將佣金新增到新的匯率中

var rate = 1.41459; // Could come from an API, or user input
var rows = table.rows( { selected: true } ).indexes();

editor.edit( rows );

$.each( rows, function (i, rowIdx) {
    var row = table.row( rowIdx );

    editor.field( 'exchange-rate' ).multiSet( row.id(), rate + row.data().commission );
} );

editor.submit();

在這種情況下，我們使用 field().multiSet() 設定個別值（每個選取的行一個，使用 row().id() 取得）。使用 row().data() 擷取行的資料以進行計算。

然後使用 submit() 在單個 Ajax 呼叫中將批量編輯提交到伺服器。

多行編輯中使用之資料格式的詳細資訊，請參閱 Editor 手冊。

升級

如果您從舊版本的 Editor 更新以使用新的多行編輯功能，則需要考慮兩個重要事項

新的 Buttons 和 Select 擴充套件
資料交換格式的更新

Buttons 和 Select

您可能已經注意到，上面的程式碼範例以及所有 Editor 範例都使用了兩個名為 Buttons 和 Select 的 DataTables 擴充套件。這些擴充套件與 Editor 1.5 同時推出，並提供了一個通用的函式庫，用於在 DataTables 中顯示按鈕，以及與 DataTables API 完全整合的列、欄和儲存格選取選項。

Buttons 和 Select 取代了舊的 TableTools 擴充套件的功能，該擴充套件現已停用。TableTools 仍可在 Editor 1.5 中正常運作，但不支援多行編輯。

為了將多行編輯與 Editor 搭配使用，如果您目前使用 TableTools，您必須更新軟體以改用 Buttons 和 Select。這是一個簡單的過程，包括在您的應用程式中包含 Buttons 和 Select 軟體（請參閱下載建立器），並更新您的初始化設定。

例如，如果使用 TableTools，您在表格初始化中使用以下程式碼來建立三個編輯按鈕並啟用列選取

tableTools: {
    sRowSelect: "os",
    sRowSelector: 'td:first-child',
    aButtons: [
        { sExtends: "editor_create", editor: editor },
        { sExtends: "editor_edit",   editor: editor },
        { sExtends: "editor_remove", editor: editor }
    ]
}

您現在可以使用以下程式碼來達成相同的目的

select: true,
buttons: [
    { extend: "create", editor: editor },
    { extend: "edit",   editor: editor },
    { extend: "remove", editor: editor }
]

這是 Buttons 和 Select 的基本初始化設定，當然還有許多其他選項，例如用於資料匯出（CSV、Excel 和 PDF）和欄可見性的按鈕，以及列選取行為控制。請參閱 Buttons 和 Select 文件以取得詳細資訊。

資料交換格式變更

在 Editor 中引入多行編輯需要更新 Editor 使用的用戶端/伺服器資料交換格式。

如果您使用提供的 PHP 或 .NET 函式庫 for Editor，則除非您直接攔截資料，否則您不需要進行任何變更。但是，如果您直接存取資料或為 Editor 撰寫了自己的伺服器端函式庫，則必須針對此情況更新程式碼，否則可以停用多行編輯並使用舊版協定 (legacyAjax)。如果這會影響您，請參閱升級文件。

下一步

這樣就完成了 Editor 多行編輯功能的介紹。希望您的使用者會發現此新功能帶來巨大的好處！如果您對此功能有任何意見回饋或問題，請隨時在 DataTables 論壇中提出。