全球知名的 JavaScript UI 組件庫 DHTMLX Suite 迎來 9.2 新版本！此次更新雖為次版本號，卻實質(zhì)性提升了 Grid 網(wǎng)格組件的交互能力與用戶體驗，引入了包括歷史記錄管理、剪貼板操作、數(shù)據(jù)選擇范圍管理、Block 區(qū)塊選擇等多項高級模塊，支持更接近電子表格的使用體驗。

新版 Grid 組件不僅在數(shù)據(jù)可視化、數(shù)據(jù)編輯方面功能更強，還增強了與主流前端框架（如 React、Vue、Angular）的集成示例，并支持將數(shù)據(jù)導(dǎo)出為 Excel。Suite 9.2 的更新，進一步提升了 DHTMLX 在構(gòu)建現(xiàn)代數(shù)據(jù)密集型 Web 應(yīng)用中的實用性。

DHTMLX Suite 官方正版試用下載

核心更新亮點一覽：

? 歷史記錄模塊（PRO 專業(yè)版）

新增的“History”模塊允許自動追蹤用戶在 UI 中的操作，包括單元格編輯、結(jié)構(gòu)變動、內(nèi)容清除等，記錄操作軌跡，支持【撤銷/重做】功能。通過以下配置即可啟用歷史記錄：

const grid = new dhx.Grid("grid", {
    columns,
    data,
    clipboard: true,
    history: {
        limit: 10,// Limits the history to 10 actions
    },
    editable: true,
    autoWidth: true,
    autoHeight: true
});

歷史模塊提供了豐富的 API 方法和事件，如undo() / redo()操作，配合beforeUndo / afterUndo等事件實現(xiàn)靈活控制，特別適合協(xié)作式數(shù)據(jù)編輯場景。

? 范圍選擇模塊 RangeSelection（PRO 專業(yè)版）

RangeSelection 模塊支持對網(wǎng)格中多個單元格進行區(qū)域性選取，是多項新功能的基礎(chǔ)?？梢酝ㄟ^setRange()設(shè)置選擇區(qū)域，或用resetRange()清除已選范圍，支持是否合并已有范圍、檢測選區(qū)狀態(tài)、判斷單元格是否處于選區(qū)等操作。

grid.range.setRange({ xStart: "a", yStart: "1" }); // 選擇起始單元格
grid.range.resetRange(); // 清除選擇

? BlockSelection 區(qū)塊選擇模塊（PRO 專業(yè)版）

全新 BlockSelection 模塊引入與 Excel、Google Sheets 類似的交互體驗，用戶可通過鼠標拖動、Shift+點擊或鍵盤組合快捷操作選取相鄰單元格區(qū)域，支持“選擇手柄”功能，可將所選單元格值批量填充。

blockSelection: {
  mode: "range",
  handle: true // 啟用右下角拖動填充
}

支持自定義選擇邏輯、樣式覆蓋、CSS 個性化配置等。無論是可視化編輯還是數(shù)據(jù)填充，該模塊都極大增強了數(shù)據(jù)表格的交互體驗。

? 剪貼板模塊 Clipboard（PRO 專業(yè)版）

剪貼板模塊使 Grid 實現(xiàn)類似 Excel 的“復(fù)制/剪切/粘貼”功能，支持表格內(nèi)部及多個 Grid 實例之間的數(shù)據(jù)交互，兼容 Excel / Google Sheets 的剪貼板操作。

默認啟用方式如下：

clipboard: true // 簡單布爾值開啟剪貼板功能

如果您需要精細化控制剪貼板數(shù)據(jù)格式（如數(shù)字、貨幣、下拉框等字段），可通過copyModifier / cutModifier / pasteModifier等格式化函數(shù)對傳輸數(shù)據(jù)進行加工處理，確保與外部系統(tǒng)或其它網(wǎng)格表的數(shù)據(jù)結(jié)構(gòu)兼容。

例如：

copyModifier: (value, cell) => {
  if (cell.column.editorType === "combobox") {
    const option = cell.column.options.find(opt => opt.id === value);
    return option ? option.value : value;
  }
  return value;
}

其他功能更新：

• ? 拖放交互全面增強，支持更多拖拽場景

• ? Grid 數(shù)據(jù)導(dǎo)出 Excel 新方案，提升數(shù)據(jù)導(dǎo)出兼容性

• ? 更新 React / Vue / Angular 集成示例

• ? 性能優(yōu)化和 Bug 修復(fù)

總結(jié)

DHTMLX Suite 9.2 提供了堪比主流電子表格工具的交互能力，尤其在數(shù)據(jù)密集型 Web 應(yīng)用、企業(yè)級后臺管理系統(tǒng)、在線數(shù)據(jù)編輯工具等場景中，顯著提升了前端表格組件的可用性和開發(fā)效率。當前版本中所有新增模塊均可在 PRO 專業(yè)版中體驗。

?? 了解更多 DHTMLX 產(chǎn)品詳情或申請試用，請

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

慧都科技是一家行業(yè)數(shù)字化解決方案公司，長期專注于軟件、油氣與制造行業(yè)。公司基于深入的業(yè)務(wù)理解與管理洞察，以系統(tǒng)化的業(yè)務(wù)建模驅(qū)動技術(shù)落地，幫助企業(yè)實現(xiàn)智能化運營與長期競爭優(yōu)勢。在軟件工程領(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ā)的標準和做法，DHTMLX提供針對桌面和移動設(shè)備定制的優(yōu)秀Web應(yīng)用程序框架。

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