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.1 現(xiàn)已發(fā)布，您可以享受新功能以實(shí)現(xiàn)更高級(jí)的數(shù)據(jù)分析。

DHTMLX Suite v9.1最新版下載

更新后的JavaScript 數(shù)據(jù)網(wǎng)格提供了行擴(kuò)展器功能，允許將子網(wǎng)格、其他 Suite 小部件或自定義 HTML 嵌入到表行中。現(xiàn)在，可以按多列對(duì)網(wǎng)格數(shù)據(jù)進(jìn)行排序并獲得更有價(jià)值的見解。最重要的是，我們的開發(fā)人員為您提供了一個(gè)新演示，演示了以數(shù)據(jù)為中心的Suite UI 小部件的多用戶后端，以及一系列新示例，重點(diǎn)是進(jìn)一步揭示實(shí)際案例場(chǎng)景中的網(wǎng)格優(yōu)勢(shì)。

用于增強(qiáng)數(shù)據(jù)管理的行擴(kuò)展器 (PRO)

從 v9.1 開始，DHTMLX Grid 提供了新的行擴(kuò)展器功能，可以更有效地處理分層數(shù)據(jù)或相關(guān)數(shù)據(jù)。借助這一新功能，最終用戶可以展開（和折疊）行以通過子行顯示額外信息，而無需離開或加載其他頁(yè)面。

更新后的 Grid API 包含大量選項(xiàng)，可讓您充分利用這一出色功能。要指定主網(wǎng)格表每行的嵌入內(nèi)容，您需要使用subRow屬性。但是，請(qǐng)注意，此屬性在 TreeGrid 模式下不起作用。

下面是向 JavaScript 數(shù)據(jù)表添加帶有額外網(wǎng)格（即子網(wǎng)格）的子行的示例：

const grid = new dhx.Grid("grid", {
    columns: [
        { id: "zone_name", header: [{ text: "Zone name" }] },
        { id: "temperature", header: [{ text: "Temperature" }] },
    ],
    data: dataset,
    subRow: ({ data }) => {
        return new dhx.Grid(null, {
            columns: [
                { id: "animal_type", header: [{ text: "Animal type" }] },
                { id: "name", header: [{ text: "Name" }] },
            ],
            data,
            autoWidth: true,
        });
    },
});

為了使您的數(shù)據(jù)表更具信息量，您可以嵌入更復(fù)雜的網(wǎng)格結(jié)構(gòu)、使用 Suite 小部件的有用的可視化效果或任何所需的 HTML 元素，如以下示例所示：

• 多級(jí)嵌套子網(wǎng)格

• 表格

• 圖表

• 自定義 HTML

• 子網(wǎng)格的行按條件擴(kuò)展

• 僅在特定行中的子網(wǎng)格

最后兩個(gè)示例生動(dòng)地展示了動(dòng)態(tài)配置子行的可能性。在第一個(gè)示例中，子行根據(jù)某些條件（例如超過溫度限制）動(dòng)態(tài)配置并觸發(fā)相應(yīng)行的突出顯示。第二個(gè)示例顯示添加到某些行的子網(wǎng)格；或者更具體地說，不會(huì)為沒有數(shù)據(jù)的行創(chuàng)建子行。

要使動(dòng)態(tài)配置正常工作，您需要使用添加到 Grid API 的subRowConfig屬性來指定子行的各種配置參數(shù)。可以通過兩種方式指定：

• 作為將必要參數(shù)應(yīng)用于所有行的對(duì)象
• 作為回調(diào)函數(shù)為每一行添加單獨(dú)的設(shè)置

使用此配置選項(xiàng)，您可以設(shè)置高度、填充、寬度、CSS 類，甚至狀態(tài)持久性（稱為保留）等參數(shù)。后一個(gè)參數(shù)需要一些解釋。它用于在展開/折疊操作、數(shù)據(jù)更新和滾動(dòng)（超出可見范圍）后保持子行的狀態(tài)不變。

const grid = new dhx.Grid("grid", {
    subRowConfig: {
        height: 200,
        expanded: false,
        preserve: false,
        toggleIcon: true,
        padding: 12,
        fullWidth: true,
        css: "",
    },
…
});

對(duì)于需要交互性和動(dòng)態(tài)內(nèi)容的場(chǎng)景，preserve 參數(shù)非常有用，但對(duì)于靜態(tài)信息和大型數(shù)據(jù)集，preserve 參數(shù)會(huì)過大，因?yàn)闀?huì)增加內(nèi)存消耗。啟用了preserve 參數(shù)并且所需的子行可見時(shí)，可以通過 getSubRow() 方法獲取特定子行的當(dāng)前配置和內(nèi)容。

新的行擴(kuò)展器是一個(gè)強(qiáng)大的功能，可以創(chuàng)建網(wǎng)格層次結(jié)構(gòu)和子視圖來顯示復(fù)雜的數(shù)據(jù)父子關(guān)系，同時(shí)保持干凈、簡(jiǎn)化的用戶界面。

多重排序以實(shí)現(xiàn)有效的數(shù)據(jù)分析 (PRO)

在新版本中，Grid 小部件成為更強(qiáng)大的數(shù)據(jù)分析工具，并增加了同時(shí)按多列對(duì)數(shù)據(jù)進(jìn)行排序的功能。此功能在數(shù)據(jù)密集型應(yīng)用中特別有用，現(xiàn)在可以從不同角度分析和比較大量數(shù)據(jù)。

在 UI 中，最終用戶可以通過按住 Ctrl 鍵單擊標(biāo)題來輕松定義所需網(wǎng)格列的排序順序和方向。使用多排序時(shí)必須按住此鍵，否則，單擊網(wǎng)格表的任何列標(biāo)題都會(huì)將排序范圍縮小到此特定列。

您甚至可以更進(jìn)一步將多重排序功能應(yīng)用于數(shù)據(jù)組：
在底層，多重排序默認(rèn)通過multiSort屬性啟用。如果不需要此功能，只需將此布爾屬性的值從 true 更改為 false。當(dāng)前排序參數(shù)可通過getSortingStates()方法獲取。此方法在DataCollection / TreeCollection中可用。

總而言之，這兩個(gè)新的 PRO 功能有助于更好地組織和使用 JavaScript 網(wǎng)格表中的表格數(shù)據(jù)，為最終用戶提供有效的數(shù)據(jù)分析工具。

如果您希望在將更新的 Suite 庫(kù)納入實(shí)際項(xiàng)目之前對(duì)其進(jìn)行測(cè)試，可以下載v9.1 的30 天免費(fèi)試用版

慧都是DHTMLX在中國(guó)的官方授權(quán)代理商，提供DHTMLX系列產(chǎn)品免費(fèi)試用，咨詢，正版銷售等于一體的專業(yè)化服務(wù)。

下載|體驗(yàn)更多DHTMLX，請(qǐng)咨詢，或撥打產(chǎn)品熱線：023-68661681