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

DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發(fā)人員更快地構(gòu)建功能豐富的、交互式的Web界面。 遵循現(xiàn)代網(wǎng)絡(luò)開發(fā)的標(biāo)準(zhǔn)和做法，DHTMLX提供針對桌面和移動設(shè)備定制的頂級Web應(yīng)用程序框架。

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

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

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

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

將 DHTMLX Grid 與 Pivot 集成時需要考慮的關(guān)鍵點

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

在網(wǎng)格模式和樞軸模式之間切換

在這些模式之間切換涉及動態(tài)初始化和銷毀相應(yīng)小部件的實例，同時保留配置。convertAndInit(state, save)函數(shù)負(fù)責(zé)此轉(zhuǎn)換。

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

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

當(dāng)切換回網(wǎng)格模式（state===0）時，Pivot 將被破壞，并且網(wǎng)格將使用之前保存的設(shè)置重新出現(xiàn)：

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

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

此外，displayButtons函數(shù)可確保為每種模式顯示適當(dāng)?shù)?UI 按鈕：

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

動態(tài)處理數(shù)據(jù)類型

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

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

然后，使用檢測到的數(shù)據(jù)類型動態(tài)生成 Pivot 字段：

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

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

避免空數(shù)據(jù)透視表問題

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

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

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

從 Pivot 切換時保留設(shè)置并維持網(wǎng)格一致性

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

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

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

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

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

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

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

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

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

總結(jié)

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

關(guān)于慧都科技：

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

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