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

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

DHTMLX Suite 官方正版試用下載

核心更新亮點(diǎn)一覽：

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

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

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等事件實(shí)現(xiàn)靈活控制，特別適合協(xié)作式數(shù)據(jù)編輯場(chǎng)景。

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

RangeSelection 模塊支持對(duì)網(wǎng)格中多個(gè)單元格進(jìn)行區(qū)域性選取，是多項(xiàng)新功能的基礎(chǔ)。可以通過(guò)setRange()設(shè)置選擇區(qū)域，或用resetRange()清除已選范圍，支持是否合并已有范圍、檢測(cè)選區(qū)狀態(tài)、判斷單元格是否處于選區(qū)等操作。

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

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

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

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

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

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

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

默認(rèn)啟用方式如下：

clipboard: true // 簡(jiǎn)單布爾值開(kāi)啟剪貼板功能

如果您需要精細(xì)化控制剪貼板數(shù)據(jù)格式（如數(shù)字、貨幣、下拉框等字段），可通過(guò)copyModifier / cutModifier / pasteModifier等格式化函數(shù)對(duì)傳輸數(shù)據(jù)進(jìn)行加工處理，確保與外部系統(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;
}

其他功能更新：

• ? 拖放交互全面增強(qiáng)，支持更多拖拽場(chǎng)景

• ? 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è)級(jí)后臺(tái)管理系統(tǒng)、在線數(shù)據(jù)編輯工具等場(chǎng)景中，顯著提升了前端表格組件的可用性和開(kāi)發(fā)效率。當(dāng)前版本中所有新增模塊均可在 PRO 專業(yè)版中體驗(yàn)。

?? 了解更多 DHTMLX 產(chǎn)品詳情或申請(qǐng)?jiān)囉茫?qǐng)

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

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

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