Capterra最新的技術趨勢調查將數據管理列為金融企業在采用新軟件解決方案時面臨的主要挑戰之一。現成的工具可能不夠靈活，無法滿足特定要求。因此，組織考慮投資定制解決方案（如數據透視表）來滿足其數據管理和分析需求是合理的。

DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發人員更快地構建功能豐富的、交互式的Web界面。 遵循現代網絡開發的標準和做法，DHTMLX提供針對桌面和移動設備定制的頂級Web應用程序框架。

在本文中，我們將介紹我們的一個新集成演示，包括 DHTMLX Pivot和 Grid。在這里，我們將重點介紹我們的開發團隊使用這些小部件創建 JavaScript 數據透視網格時使用的一些技術技巧。

使用 DHTMLX Grid 和 Pivot 制作的 JavaScript Pivot Grid 示例

DHTMLX Grid 是一款流行的JavaScript 數據網格小部件，用于處理表格數據，其最新版本 (9.1) 引入了行擴展器和多重排序等出色的新 PRO 功能。但通過與 DHTMLX Pivot 結合使用，Grid 小部件可以變得更加強大。使用下面的實時示例，您可以方便地在 Grid 和 Pivot 模式之間切換，應用不同的聚合，并動態分析數據。

我們的JavaScript 數據透視表于去年進行了全面改進，通過啟用動態數據聚合來比較和分析復雜數據，增強了數據分析能力。這種集成允許最終用戶在網格視圖和數據透視視圖中的原始表格數據之間無縫切換，在數據透視視圖中，信息可以輕松組織成有效決策所需的有意義的摘要。

將 DHTMLX Grid 與 Pivot 集成時需要考慮的關鍵點

現在，讓我們重點介紹將這些 DHTMLX 小部件集成到單個樞軸網格解決方案中的主要方面。除了將 DHTMLX 組件包含在項目中并初始化它們等常見事項的細節之外，我們將重點關注更具挑戰性的任務。

在網格模式和樞軸模式之間切換

在這些模式之間切換涉及動態初始化和銷毀相應小部件的實例，同時保留配置。convertAndInit(state, save)函數負責此轉換。

當切換到 Pivot 模式（state === 1）時，Grid 將被破壞，并且 Pivot 表將使用存儲或默認設置進行初始化。

grid.destructor();
pivotWidget = new pivot.Pivot("#grid-pivot", {
    fields: storedPivotFields || [],
    config: storedPivotConfig || {},
    data: dataset,
});

當切換回網格模式（state===0）時，Pivot 將被破壞，并且網格將使用之前保存的設置重新出現：

pivotWidget.destructor();
grid = new dhx.Grid("grid-pivot", storedGridConfig);

這種方法可以防止內存泄漏，并避免同時運行同一組件的多個實例。

此外，displayButtons函數可確保為每種模式顯示適當的 UI 按鈕：

function displayButtons(state) {
    document.getElementById("edit-button").style.display = state === 1 ? "none" : "block";
    document.getElementById("aux-buttons").style.display = state === 1 ? "flex" : "none";
}

動態處理數據類型

DHTMLX Pivot 需要正確定義字段數據。否則，數字列可能會被視為文本，從而影響排序和聚合。使用dataTypes對象有助于根據網格數據的第一行自動檢測列類型：

const dataTypes = {};
const firstItem = grid.data.getItem(grid.data.getId(0));
for (const c in firstItem) {
    dataTypes[c] = typeof(firstItem[c]) === "string" ? "text" : typeof(firstItem[c]) === "number" ? "number" : "date";
}

然后，使用檢測到的數據類型動態生成 Pivot 字段：

storedPivotFields = grid.config.columns.map(col => ({
    id: col.id,
    label: col.header[0].text,
    type: dataTypes[col.id]
}));

這確保了 Pivot 組件無需手動配置即可正確處理數字和基于文本的數據。

避免空數據透視表問題

沒有定義行、列或值的數據透視表會顯示為空白。為了避免出現不必要的空白 UI 并使最終用戶能夠在數據透視模式下與網格數據進行交互，您可以使用replaceInnerGrid(pivotWidget)函數在數據透視容器內插入一個臨時網格：

function replaceInnerGrid(pivot) {
    const grid = pivot.container.getElementsByClassName("wx-grid");
    if (grid.length) {
        grid[0].innerText = "";
        innerGrid = new dhx.Grid(grid[0], defaultGridConfig);
    }
}

該解決方案通過顯示有意義的數據而不是空白屏幕來改善用戶體驗。

從 Pivot 切換時保留設置并維持網格一致性

Pivot 組件的豐富功能使最終用戶能夠重新排列數據并執行復雜的計算以獲得有價值的見解。因此，在切換到網格模式之前保留 Pivot 設置非常重要：

const tableApi = pivotWidget.getTable();
const pivotConfig = pivotWidget.api.getState().config;

代碼通過提取 Pivot 的最終狀態并將其應用于 Grid 來實現這一點。如果在 Pivot 模式下未進行任何配置更改，則恢復原始 Grid 配置：

if (!pivotConfig.rows.length && !pivotConfig.columns.length && !pivotConfig.values.length) {
    storedGridConfig = defaultGridConfig;
    storedPivotConfig = null;

由于 Pivot 和 Grid 處理列寬的方式不同，切換回 Grid 可能會導致寬度不一致。您必須確保每列都有預定義的寬度：

columns: columns.map(c => {
    c.id = c.id.toString();
    c.width = c.width ? c.width : 150;
    return c;
}),

如果沒有這個步驟，從樞軸模式切換后，網格布局可能會中斷或出現錯位。

總而言之，這些措施有助于確保在 Grid 和 Pivot 之間切換時獲得一致且用戶友好的體驗。

考慮到本博文中強調的要點，您可以像我們的示例中一樣使用 DHTMLX Grid 和 Pivot 組件創建一個基本的 JavaScript 數據透視網格。使用這些產品中文檔齊全的 API，您可以顯著擴展其功能以滿足各種項目需求。

總結

DHTMLX Grid 和 Pivot 組件可以成為任何對處理和分析大型數據集有很高要求的數據密集型應用程序的絕佳補充。與所有 DHTMLX 產品一樣，這些組件具有高度兼容性，可以輕松集成到基于流行前端框架的 Web 項目中的單一樞軸網格解決方案中。下載免費的 30 天試用版Grid 和 Pivot 組件，并在您的場景中測試這些產品的功能。

關于慧都科技：

慧都科技是專注軟件工程、智能制造、石油工程三大行業的數字化解決方案服務商。在軟件工程領域，我們提供開發控件、研發管理、代碼開發、部署運維等軟件開發全鏈路所需的產品，提供正版授權采購、技術選型、個性化維保等服務，幫助客戶實現技術合規、降本增效與風險可控。慧都科技DHTMLX在中國的官方授權代理商，提供DHTMLX系列產品免費試用，咨詢，正版銷售等于一體的專業化服務。DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發人員更快地構建功能豐富的、交互式的Web界面。 遵循現代網絡開發的標準和做法，DHTMLX提供針對桌面和移動設備定制的優秀Web應用程序框架。

下載|體驗更多DHTMLX，請咨詢，或撥打產品熱線：023-68661681