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

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

DHTMLX Suite v9.0正式版下載

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

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

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

現(xiàn)在，Grid API 允許配置JS 數(shù)據(jù)表以呈現(xiàn)平面和層次結(jié)構(gòu)。在 Grid 配置中使用type: “tree”可以啟用具有所有 TreeGrid 功能的樹模式：

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

新模式支持鍵盤導(dǎo)航，以確保使用按鍵和快捷鍵方便地管理樹狀數(shù)據(jù)結(jié)構(gòu)。

靈活行數(shù)據(jù)分組 (PRO)

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

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

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

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

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

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
});

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

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

如果分組僅與特定的網(wǎng)格列相關(guān)，則應(yīng)將groupable屬性（以及closable，如果需要）添加到所需列的配置中。

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

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

使用自定義函數(shù)計算的值的摘要

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

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

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

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

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

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

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

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

為了在列和網(wǎng)格摘要中呈現(xiàn)自定義統(tǒng)計信息，需要將列和網(wǎng)格跨度配置對象的text和tooltipTemplate屬性設(shè)置為回調(diào)函數(shù)。

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

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

此類自定義增強了 DHTMLX Grid 在需要復(fù)雜計算的應(yīng)用程序中可用性。

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

使用網(wǎng)格和表單中的輸入掩碼提高準確性

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

• 數(shù)字掩碼

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

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

• 圖案蒙版

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

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

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

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

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