DHTMLX UI 組件庫(kù)允許您更快地構(gòu)建跨平臺(tái)、跨瀏覽器 Web 和移動(dòng)應(yīng)用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個(gè)應(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 庫(kù)引入了創(chuàng)新增強(qiáng)功能，行數(shù)據(jù)分組是此版本的核心。歡迎下載體驗(yàn)！

DHTMLX Suite v9.0正式版下載

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

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

DHTMLX TreeGrid 是 Grid 小部件的擴(kuò)展，因此它們?cè)谑褂煤?API 方面一直非常相似。這就是為什么將 TreeGrid 合并到 Grid 中是一個(gè)合乎邏輯的步驟，它擴(kuò)大了 Grid 在具有可擴(kuò)展/可折疊行的分層數(shù)據(jù)表示中的適用性。還有其他積極的結(jié)果，例如統(tǒng)一的功能、更快的開發(fā)和簡(jiǎn)化的維護(hù)。從技術(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ù)分組。這是此主要版本的一個(gè)殺手級(jí)功能，旨在通過根據(jù)選定的分組標(biāo)準(zhǔn)分層組織數(shù)據(jù)來簡(jiǎn)化大型數(shù)據(jù)集的分析。因此，它成為一個(gè)強(qiáng)大的工具，可以迅速?gòu)木酆蠑?shù)據(jù)中發(fā)現(xiàn)有價(jià)值的模式和趨勢(shì)，從而促進(jìn)更有效的決策。

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

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

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

組配置選項(xiàng)包含許多參數(shù)，可幫助您根據(jù)需要修改分組設(shè)置。例如，您可以將分組與數(shù)據(jù)聚合結(jié)合起來。為此，您需要fields參數(shù)，該參數(shù)設(shè)置按某些列進(jìn)行數(shù)據(jù)分組的擴(kuò)展配置，并指定聚合和顯示總值的規(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)格表的一列或多列的值對(duì)數(shù)據(jù)進(jìn)行分組嗎？只需在網(wǎng)格配置中啟用groupable屬性即可。您還可以在此配置中添加closable屬性，允許用戶從分組面板中刪除任何項(xiàng)目。

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

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

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

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

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

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

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

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

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

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

2）形成所需級(jí)別的匯總清單。

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

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

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

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

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

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

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

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

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

• 數(shù)字掩碼

它僅用于指定數(shù)值的輸入掩碼。此屬性包括此頁(yè)面提供的一系列參數(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)在可用于另一個(gè)以數(shù)據(jù)為中心的 Suite 小部件 Form。此小部件的 API 還接收了numberMask和patternMask屬性，用于在 Form 小部件的輸入和文本區(qū)域控件中指定所需的掩碼模板。輸入控件 API 具有用于管理輸入掩碼的getText()方法。嘗試使用 JS 表單的數(shù)字掩碼和模式掩碼。

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

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