DHTMLX UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個應用程序界面中。DHTMLX JS UI 組件可用于任何服務器端技術：PHP、Java、ASP.NET、Ruby、Grails、ColdFusion、Python 等。此外，您可以輕松地將它們集成到基于Angular、React和 Vue.js 的 Web 應用中。

DHTMLX Suite 9.0 現已發(fā)布，該版本將數據管理功能提升到了新的高度！此主要版本為 JavaScript UI 庫引入了創(chuàng)新增強功能，行數據分組是此版本的核心。歡迎下載體驗！

DHTMLX Suite v9.0正式版下載

• 行數據分組：使用 API 或 UI 輕松分組和自定義數據呈現。
• 自定義統計功能：顯示特定列的自定義計算摘要。
• 輸入掩碼：使用適用于網格和表單小部件中各種數據格式的用戶友好型輸入掩碼改進數據輸入。
• 集成 TreeGrid：使用現在完全集成到網格小部件中的 TreeGrid 簡化您的設置。

TreeGrid 成為 Grid Widget 的一部分 (PRO)

DHTMLX TreeGrid 是 Grid 小部件的擴展，因此它們在使用和 API 方面一直非常相似。這就是為什么將 TreeGrid 合并到 Grid 中是一個合乎邏輯的步驟，它擴大了 Grid 在具有可擴展/可折疊行的分層數據表示中的適用性。還有其他積極的結果，例如統一的功能、更快的開發(fā)和簡化的維護。從技術角度來看，這一措施是此版本的最大功能（即基于樹結構的數據分組）的關鍵條件。

 現在，Grid API 允許配置JS 數據表以呈現平面和層次結構。在 Grid 配置中使用type: “tree”可以啟用具有所有 TreeGrid 功能的樹模式：

const grid = new dhx.Grid("grid_container", {
    type: "tree",
    columns: [
       // columns config
    ],
    width: 400,
    data: dataset
});

新模式支持鍵盤導航，以確保使用按鍵和快捷鍵方便地管理樹狀數據結構。

靈活行數據分組 (PRO)

從 v9.0 開始，DHTMLX Grid 支持行數據分組。這是此主要版本的一個殺手級功能，旨在通過根據選定的分組標準分層組織數據來簡化大型數據集的分析。因此，它成為一個強大的工具，可以迅速從聚合數據中發(fā)現有價值的模式和趨勢，從而促進更有效的決策。

最棒的是，此功能在實現時考慮到了高度靈活性，這意味著您可以根據任何項目需求配置分組。為此，我們豐富了 Grid API，增加了新屬性，允許您指定分組詳細信息。

預定義分組配置通過新的group屬性實現。此屬性用于指定表中分組的行為、可見性和外觀。它還允許管理組面板、列的顯示、分組順序以及與數據聚合相關的設置。

const grid = new dhx.Grid("grid", {
    columns,
    group: {
        order: ["shelter_location"]
    },
    //more configuration options
});

組配置選項包含許多參數，可幫助您根據需要修改分組設置。例如，您可以將分組與數據聚合結合起來。為此，您需要fields參數，該參數設置按某些列進行數據分組的擴展配置，并指定聚合和顯示總值的規(guī)則。分組的順序在相應的order參數中排列。

const grid = new dhx.Grid("grid", {
    columns: [
        { id: "country", header: [{ text: "Country" }] },
        { id: "population", header: [{ text: "Population" }] },
        { id: "density", header: [{ text: "Density (P/Km2)" }] }
    ],
    group: {
        panel: true,
        fields: {
            population: {
                summary: "bottom",
                map: {
                    population: ["population", "sum"],
                    customSummary: function(rows) {
                        return rows.length;
                    }
                }
            }
        },
        order: ["population"]
    },
    data: dataset
});

至于最終用戶的分組能力，那是非常巨大的。想讓最終用戶完全自由地根據網格表的一列或多列的值對數據進行分組嗎？只需在網格配置中啟用groupable屬性即可。您還可以在此配置中添加closable屬性，允許用戶從分組面板中刪除任何項目。

在 UI 中，只需將所需列的標題拖到分組面板中，Grid 就會根據這些列中的值自動創(chuàng)建組。最終用戶還可以通過重新排序面板中的項目或刪除不再需要的項目來編輯分組的嵌套級別。分組列的值是可排序的。

如果分組僅與特定的網格列相關，則應將groupable屬性（以及closable，如果需要）添加到所需列的配置中。

在網格配置中啟用分組功能后，該功能也會在DataCollection API中可用。在 v9.0 中，它包含一系列用于分組項目的新方法和事件。例如，您可以對數據進行分組并將其分為不同的類別：

因此，這一重要功能將幫助您彌合原始數據和可操作見解之間的差距。

使用自定義函數計算的值的摘要

此主要版本中為 DHTMLX Grid 提供的另一個重大創(chuàng)新在于自定義計算領域。我們在這里談論的是重新定義默認統計函數并呈現特定列或整個 JS 網格表的自定義計算摘要的能力。這在預定義函數（sum、avg 等）不夠用的場景中非常有用。例如，財務報告或科學研究可能有特定的數據分析需求，可以通過自定義計算來解決，而更新的 Grid API 使您能夠做到這一點。

在 JavaScript 數據表中生成數據摘要的過程包括以下步驟：

1) 定義一個函數，用于在創(chuàng)建摘要列表時進行計算。

為此，您需要dhx.methods助手，它用于定義默認統計函數或創(chuàng)建自定義函數，如下所示：

dhx.methods.doubleSum = (rows, field) => {
    return rows.reduce((sum, row) => sum + row[field] * 2, 0); };

2）形成所需級別的匯總清單。

您可以為特定列或整個數據表創(chuàng)建摘要：

• 對于列，您應該使用summary屬性在 Grid 列配置中初始化摘要（作為對象或字符串）。
• 對于覆蓋整個表格的摘要，您需要網格的摘要配置選項。

為了在列和網格摘要中呈現自定義統計信息，需要將列和網格跨度配置對象的text和tooltipTemplate屬性設置為回調函數。

3) 獲取具有計算值的摘要對象。Grid

API 現在包含getSummary()方法，可用于獲取整個網格或特定列的摘要數據。如果調用該方法而不帶任何參數，您將獲得整個網格的摘要。指定id參數后，您將獲得列和網格的摘要。

此類自定義增強了 DHTMLX Grid 在需要復雜計算的應用程序中可用性。

在此示例中，您可以看到如何將這些新功能應用于實際場景中，并在編輯后進行動態(tài)更新。

使用網格和表單中的輸入掩碼提高準確性

處理復雜表格時，最終用戶可能需要以特定格式輸入數據（日期、電話、數字、信用卡詳細信息等），并且可能會出現錯誤。Web 開發(fā)人員可以實施廣泛的驗證邏輯來減少此類錯誤的可能性，但 Suite 9.0 為此類問題提供了更簡單的解決方案。這些是可以使用 Grid 列對象中的以下屬性為各種數據格式指定的輸入掩碼：

• 數字掩碼

它僅用于指定數值的輸入掩碼。此屬性包括此頁面提供的一系列參數，可幫助您形成所需的數字格式。例如，以下示例中的 Salary 列的輸入掩碼配置方式如下：

...
{
   id: "salary",
   header: [{ text: "Salary" }],
   numberMask: { prefix: "￡", maxDecLength: 0 }
}
...

• 圖案蒙版

使用此屬性，您可以為列指定輸入掩碼，其中單元格可以包含數字和字符串值。常見的情況是信用卡掩碼：

...
{
   id: "card_number",
   header: [{ text: "Card number" }],
   patternMask: "0000 0000 0000 0000"
}
...

這些輸入掩碼新功能現在可用于另一個以數據為中心的 Suite 小部件 Form。此小部件的 API 還接收了numberMask和patternMask屬性，用于在 Form 小部件的輸入和文本區(qū)域控件中指定所需的掩碼模板。輸入控件 API 具有用于管理輸入掩碼的getText()方法。嘗試使用 JS 表單的數字掩碼和模式掩碼。

如果您想探索v9.0 中的所有精彩功能，歡迎下載DHTMLX Suite v9.0體驗！

慧都21周年慶年終大促現已開啟，DHTMXL全線產品參與優(yōu)惠活動，如有任何問題和需求，請聯系~