Editor 1.6

我很高興宣佈 Editor 1.6 的發佈，這是 Editor 1.x 系列的第六次主要更新。它是對所有現有授權持有者的免費升級，並新增了許多令人興奮的新功能，大大提高了 Editor 的功能，尤其是在客戶端方面。

在這篇文章中，我將概述 1.6 中的新功能，並在未來的文章中探討如何利用它們來進一步增強使用 Editor 開發的應用程式。

升級

Editor 1.6 可以從其下載頁面下載，如果您還沒有試用過 Editor，可以下載免費試用版，或者如果您擁有授權，將自動下載完全授權的版本。

此版本升級沒有特殊考慮事項，它與 1.5 完全向後相容，應該可以直接放入並取代您現有的函式庫。如果您是從 1.4 或更早版本升級，則值得閱讀1.5 升級文件，因為該版本有一些您應該注意的變更。

客戶端

Editor 主要是一個客戶端軟體（附帶支援 PHP 和 .NET 函式庫，讓入門更容易！），所以我們先關注客戶端，並詳細介紹您在為客戶建立可編輯表格時可以使用的全新功能。

範本

Editor 中最受歡迎的功能之一是能夠以比簡單線性列表更複雜的佈局顯示表單。以前您可以使用 CSS 來實現多欄佈局，但它本身就有限制。為了解決這個問題，Editor 1.6 推出了新的 template 選項。它允許您指向一個元素，Editor 將在其主要的編輯表單中顯示該元素，並通過 HTML5 自訂標籤（<editor-field>）讓您指定您希望表單中的每個欄位顯示在哪裡。

這裡的想法是讓您可以為表單的佈局指定您自己的 HTML 結構，無論是什麼樣的結構。一如既往，一個範例勝過千言萬語，所以這裡有一個範例。

這個範本是一個相對簡單的範例。可以實現更複雜的佈局，包括使用標籤來分隔欄位。這將在未來的部落格文章中進一步探討。

無 Ajax

儘管大多數 Editor 應用程式都會向伺服器發送 Ajax 請求以更新資料庫，但也很常見的是只想在本地更新 DataTables 的資料，而無需立即將其保存到伺服器。然後，您可能會批量提交多個編輯或寫入本地資料庫。以前在 Editor 中，這意味著使用 ajax 選項並提供您自己對 Editor 客戶端/伺服器資料 的實作 - 這並不是一件特別簡單的任務！

僅在客戶端編輯表格的資料現在變得非常簡單 - 只需不包含 ajax 選項（以前是強制性的 - 現在已不再是）。Editor 將自動為您更新表格。

現在，客戶端上的一個可編輯表格可能像以下程式碼一樣簡單，我們在其中定義欄位，並使用按鈕來呈現觸發編輯的方式

$(document).ready( function () {
  var editor = new $.fn.dataTable.Editor( {
    table: '#example',
    idSrc: 0,
    fields: [
      { label: 'Name',       name: 0 },
      { label: 'Position',   name: 1 },
      { label: 'Office',     name: 2 },
      { label: 'Age',        name: 3 },
      { label: 'Start date', name: 4, type: 'datetime' },
      { label: 'Salary',     name: 5 }
    ]
  } );

  var table = $('#example').DataTable( {
    dom: "Bfrtip",
    select: true,
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]
  } );
} );

Semantic UI

Editor 長期以來一直享受著對 Bootstrap、Foundation 和 jQuery UI 的直接整合，現在 Semantic UI 也加入了這個行列！Semantic UI 是一個現代 CSS 框架，顧名思義，它專注於透過 CSS/類別名稱語義來提供功能和樣式。在 Editor 範例中提供了 Editor 使用 Semantic UI 的範例。

DataTables 下載產生器 尚未包含 Semantic UI 作為樣式選項，但它將在未來幾天內更新以包含。

伺服器端

當我們考慮用於 Editor 的 PHP 和 .NET 伺服器端函式庫時，樂趣並沒有停止，它們也都看到了一些新功能。這兩個函式庫是並行開發的，它們的功能集和基本 API 保持相同，同時允許每個平台的慣例有所差異。因此，如果您在其中一個函式庫中看到某個功能，則另一個函式庫中也可能會出現該功能。

除錯模式

Editor 使用資料庫抽象層，以便它可以與各種不同的資料庫進行通訊。該抽象層將根據實例的配置方式以及已設定的資料來建立適當的 SQL 語句。這在一切正常時效果很好。了解正在執行的 SQL 是 Editor 中大多數除錯的基本起點，但要確切了解正在使用的語句是相當困難的。現在函式庫具有除錯模式。

Editor::inst( $db, 'myTable' )
    ->debug( true )
    ->fields( ... )
    ...;

new Editor( db, "myTable" )
    .Debug( true )
    .Model( ... )
    ...;

啟用除錯模式後，在伺服器在每次請求（讀取、建立、編輯和刪除）時發送回客戶端的 JSON 中會傳回一個 debugSql 參數。這會顯示已執行的查詢以及繫結到查詢的任何參數。例如，在一個簡單的更新中，我們可能會得到 Editor 已執行的以下 UPDATE 和 SELECT 語句

{
    "debugSql": [{
        "query": "UPDATE  `datatables_demo` SET  `first_name` = :first_name, `last_name` = :last_name, `position` = :position, `office` = :office WHERE `id` = :where_0 ",
        "bindings": [{
            "name": ":first_name",
            "value": "Fiona",
            "type": null
        }, {
            "name": ":last_name",
            "value": "Green",
            "type": null
        }, {
            "name": ":position",
            "value": "Chief Executive Officer (CEO)",
            "type": null
        }, {
            "name": ":office",
            "value": "San Francisco",
            "type": null
        }]
    }, {
        "query": "SELECT  `id` as 'id', `first_name` as 'first_name', `last_name` as 'last_name', `position` as 'position', `email` as 'email', `office` as 'office' FROM  `datatables_demo` WHERE `id` = :where_0 ",
        "bindings": [{
            "name": ":where_0",
            "value": "29",
            "type": null
        }]
    }]
}

改良的選項

當使用聯結表格中的資訊時，很常見的是想要獲取最終使用者可以選擇的選項清單。Editor 通過其 Field->option() / Field.Option() 方法提供此功能。以前，此方法只接受參數清單，這並不是特別可擴充的。現在，它接受一個新的 Options 類別的實例，該實例可以使用與其他 Editor 類別相同的鏈接 API 樣式進行配置，使其更易於使用。

此外，新的 Options 類別還提供了控制記錄排序和限制結果數量的選項，以及提供現有的條件運算子和呈現器。

Field::inst( 'users.site' )
    ->options( Options::inst()
        ->table( 'sites' )
        ->value( 'id' )
        ->label( 'name' )
    );

new Field("users.site")
    .Options(new Options()
        .Table("sites")
        .Value("id")
        .Label("name")
    );

這個新類別還為在未來版本的 Editor 中新增自動相依欄位等新功能提供了範圍，而不會使介面複雜化！有關更多資訊，請參閱每個平台的說明文件：PHP | .NET。

可取消的事件

由函式庫觸發的伺服器端事件（PHP | .NET），當執行某些動作時允許自訂特定動作的 Editor 配置、記錄或更新的其他通知服務。

觸發的 pre* 事件對於新增或執行驗證特別有用，但沒有選項可以從該函數中取消 Editor 在該點將執行的動作（例如，如果自訂驗證失敗）。此功能現在在 1.6 中提供，其中所有觸發的 pre* 事件都可以取消。

在以下範例中，會檢查會話變數，以確認使用者是否具有在寫入資料庫之前更新表格的權限。如果他們沒有權限，則會取消該動作。

$editor->on( 'preEdit', function ( $editor, $id, $values ) {
    if ( ! $_SESSION['access-edit'] ) {
        return false;
    }
} );

editor.PreEdit += ((sender, args) =>
{
    if (!Session["AccessEdit"])
    {
        args.Cancel = true;
    }
});

有關伺服器端事件的更多資訊，請參閱每個函式庫的說明文件：PHP | .NET。

複合索引鍵

為了能夠編輯和刪除 DataTable 中的資料，Editor 需要能夠唯一地尋址每一列。這是使用唯一索引鍵完成的。以前，只能使用資料庫表格中單一欄的值來實現此目的，但使用 1.6，現在可以使用複合索引鍵（即由多個欄組成的索引鍵）。當使用聯結多個其他表格的表格，並且您想要確保唯一性、處理日期和其他情況時，這會特別有用。

對此的支援是在 PHP 和 .NET 函式庫中透過在建立新的 Editor 實例時，簡單地將組成複合索引鍵的欄名稱陣列作為主要索引鍵參數傳遞來完成的

Editor::inst( $db, 'visitors', array('visitor_id', 'visit_date') );

new Editor( db, "visitors", new []{"visitor_id", "visit_date"} );

使用複合索引鍵時，值得注意一個重要考慮事項：在建立新列時，您必須提交組成複合索引鍵的欄的資料（否則會顯示錯誤）。Editor 目前無法讀取由資料庫產生的資訊。如果您需要設定伺服器端計算的值（例如，目前時間），請使用 Field->setValue() / Field.SetValue() 方法設定值。

完整發行說明

當然，Editor 1.6 中還有許多其他較小的新功能和一些錯誤修正，例如

• fields.multiEditable 指示在編輯多列時不應編輯欄位
• Bootstrap 4 技術預覽範例（在撰寫本文時，Bootstrap 4 仍處於 alpha 版）。
• 伺服器端函式庫中的全域驗證 - PHP | .NET
• PHP 和 .NET 函式庫中的 Oracle 支援

有關 1.6 中新增、變更和修正的完整資訊和詳細資訊，請參閱1.6.0 發行說明。