91社区体验区,国产在线日韩,成人ww视频免费

JS UI庫DHTMLX Suite 發(fā)布v9.1：具有行擴展器、多重排序、多用戶后端等功能的網格

翻譯|產品更新|編輯：吉煒煒|2025-02-26 11:04:46.627|閱讀 140 次

概述：在 DHTMLX Suite 9.1 版本中，您可以享受新功能以實現更高級的數據分析。

相關鏈接：

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

DHTMLX Suite 9.1 現已發(fā)布，您可以享受新功能以實現更高級的數據分析。

DHTMLX Suite v9.1最新版下載

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

用于增強數據管理的行擴展器 (PRO)

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

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

下面是向 JavaScript 數據表添加帶有額外網格（即子網格）的子行的示例：

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

為了使您的數據表更具信息量，您可以嵌入更復雜的網格結構、使用 Suite 小部件的有用的可視化效果或任何所需的 HTML 元素，如以下示例所示：

多級嵌套子網格

具有多級嵌套子網格的子行

表格

帶有表單的子行

圖表

帶圖表的子行

自定義 HTML

具有自定義 HTML 的子行

子網格的行按條件擴展

按條件擴展網格行

僅在特定行中的子網格

某些行中的子網格

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

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

作為將必要參數應用于所有行的對象
作為回調函數為每一行添加單獨的設置

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

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

對于需要交互性和動態(tài)內容的場景，preserve 參數非常有用，但對于靜態(tài)信息和大型數據集，preserve 參數會過大，因為會增加內存消耗。啟用了preserve 參數并且所需的子行可見時，可以通過 getSubRow() 方法獲取特定子行的當前配置和內容。

新的行擴展器是一個強大的功能，可以創(chuàng)建網格層次結構和子視圖來顯示復雜的數據父子關系，同時保持干凈、簡化的用戶界面。

多重排序以實現有效的數據分析 (PRO)

在新版本中，Grid 小部件成為更強大的數據分析工具，并增加了同時按多列對數據進行排序的功能。此功能在數據密集型應用中特別有用，現在可以從不同角度分析和比較大量數據。

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

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