2015 年 2 月 12 日星期四

Editor 1.4 / DataTables 1.10.5

我很高興在 2015 年的第一篇部落格文章中宣布 Editor 1.4 和 DataTables 1.10.5 的發布。2015 年對 DataTables 專案來說將會是令人興奮的一年,計畫為該專案增加許多有用的功能,而這兩個新版本為此奠定了良好的基礎。

在這篇文章中,我將概述每個版本中的一些主要新功能 - 在未來的文章中,我將更詳細地探討其中一些功能。

Editor 1.4 和 DataTables 1.10.5 都可立即使用

Editor 1.4

Editor 的第五個主要版本增加了對 .NET 平台的支援。自 Editor 最初發布以來,它就提供了 PHP 函式庫,以盡可能簡化 CRUD 操作。最初決定專注於 PHP 是為了最大化 Editor 在市場上的影響力。然而,我們的目標一直是不僅限於 PHP,現在透過引入 DataTables 和 Editor 的 .NET 函式庫,這個目標已經實現。

此版本的重點主要在於 .NET 函式庫的開發,但也為 Javascript 和 PHP 組件引入了新功能,並解決了所有已知的錯誤。

此外,作為 1.4 版本的一部分,Editor 的打包和安裝也得到了簡化。現在有三個套件,所有外部資源都是從 CDN 請求,而無需設定特定的路徑結構。

  • 適用於 PHP 的 Editor - 包含 PHP 函式庫和所有範例
  • 適用於 .NET 的 Editor - 包含 .NET 函式庫和所有範例
  • 僅限 Editor JS+CSS - 只有客戶端軟體!

Editor 1.4 是所有現有許可證持有者的免費升級。

.NET

適用於 Editor 的 .NET 函式庫提供的功能與 PHP 函式庫相同,具有非常相似的 API(儘管每個 API 略有不同,以符合每個平台的最佳實務)。隨著 Editor 開發的進展,這兩個函式庫將並行開發並保持功能相容性。

已經開發了使用 Editor 與 .NET 的詳盡文件。範例和文件的重點主要在使用 Web API 與 Editor 的 Ajax 呼叫,因為 Web API 非常適合像 Editor 這樣的用例,但如果需要,您也可以使用更傳統的 MVC 控制器來回應 Ajax 請求。

Editor .NET 套件是一個 Visual Studio 專案,可讓您快速啟動並執行 Editor。只需下載套件,將其設定為存取您的資料庫,並在您的資料庫上安裝 Editor 示範 SQL!完整的安裝說明可供參考。

產生器

Editor 的產生器已更新為根據您選擇的平台產生 PHP 套件或 Visual Studio 套件,使您能夠在任一平台上輕鬆上手。只需輸入您想要的欄位,產生器就會建立您在客戶端和伺服器端所需的一切。

產生器建立的 SQL 目前支援 SQL Server / Azure、MySQL 和 Postgres 資料庫。未來將新增其他資料庫,例如 Oracle 和 SQLite。

Dependent 方法

在客戶端,Editor 的新 dependent() 方法提供了根據使用者輸入值輕鬆有條件地更新表單的功能。例如,考慮當選取特定的選取輸入或單選按鈕值時,想要顯示其他選項的常見情況 - dependent() 現在使此操作變得微不足道。

在下面的範例中,當欄位 location 的值設定為「其他」時,將會顯示「external_location」欄位 - 否則將會隱藏

editor.dependent( 'location', function ( val, data, callback ) {
    return val === 'other' ?
        { show: 'external_location' } :
        { hide: 'external_location' };
} );

dependent() 可以透過使用回傳資料來控制欄位可見性、選項和值。此外,它可以使用本機回呼(如上例)或使用 Ajax 請求從外部取得該控制資料。

使用 dependent(),可以像建立簡單表單一樣快速地建立複雜表單!

其他功能

還有其他新功能,例如在 Editor 類別中使用複雜條件和子查詢的功能,以及對伺服器端函式庫的 get 和 set 值進行細粒度控制。這些主題可能相當複雜,因此我將在未來的文章中探討它們!

DataTables 1.10.5

DataTables 的最新版本主要是一個錯誤修復版本,儘管它確實引入了使用 HTML data-* 屬性設定 DataTable 的新功能。當建構 DataTable 時,它現在將從 table 標籤讀取 data-* 屬性,並將其用作初始化選項。這個功能是一個經常被要求的功能,也是我一直想添加的功能 - 非常感謝 greenbender 建議了一個非常簡單的實現方法!

使用 data-* 屬性作為初始化選項非常簡單,您只需要記住兩個規則

  • 屬性破折號名稱將自動轉換為 camelCase。例如,pageLength 選項將寫為屬性 data-page-length
  • 如果需要將物件或陣列值作為值,則它必須是有效的 JSON。這表示雙引號必須在屬性內使用,因此單引號用於屬性本身(這是 jQuery 實作其 $().data() 方法的方式,此功能使用該方法)。

不僅可以将表級配置屬性應用於 table 標籤,還可以通過使用每個列的標題單元格的屬性應用列選項。

例如,請考慮以下 HTML

<table data-order='[[ 1, "asc" ]]' data-page-length='25'>
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th data-class-name="priority">Salary</th>
        </tr>
    </thead>
</table>

這在功能上與使用以下 Javascript 相同

$('table').DataTable( {
    order: [[ 1, "asc" ]],
    pageLength: 25,
    columnDefs: [ {
        targets: -1,
        className: "priority"
    } ]
} );

這種設定選項的方法將優先於 Javascript 設定的參數(允許 Javascript 設定為頁面全域,而這是特定於表格的)。此外,初始化文件也已更新以反映此新選項。

下載

DataTables 1.10.5 可在 DataTables CDN 上取得,也可以從下載頁面下載以進行本機託管。

有關 1.10.5 中新功能和錯誤修復的完整概述,請參閱版本說明

盡情享用!

開發 DataTables 和 Editor 總是一種樂趣,我對這些最新版本感到非常興奮。如果您遇到任何問題或對它們有任何疑問,請在論壇中開啟一個新主題。同樣,如果您只是想分享您如何使用它們,請告訴我們!