DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExtreme已正式發(fā)布了v21.2，新版本持續(xù)增強Data Grid、Tree List控件的API功能等，歡迎下載最新版體驗！

Data Grid 和 Tree List

API 增強功能

新的工具欄自定義 API

您現(xiàn)在可以即時自定義DataGrid/TreeList 工具欄：

• 您可以隨時動態(tài)更改工具欄項目（過去，您只能在創(chuàng)建工具欄時這樣做一次）。
• 在 React、Angular 或 Vue 應(yīng)用程序中使用DataGrid/TreeList 時，您可以以聲明方式自定義工具欄，而無需直接 DOM 操作。

此版本添加了一個新的工具欄屬性，允許以與獨立工具欄大致相同的方式自定義工具欄項目。每個 DataGrid/TreeList 工具欄項都可以指定為與獨立工具欄具有相同結(jié)構(gòu)的對象，此外您可以使用內(nèi)置 DataGrid/TreeList 命令列表中的預(yù)定義字符串名稱指定項目（例如 'addRowButton'、'applyFilterButton'、'columnChooserButton'、'exportButton'、'groupPanel'、'revertButton' ， 'saveButton'， 'searchPanel'）。

禁用命令按鈕

您現(xiàn)在可以使用新的禁用列按鈕的屬性禁用特定行的某些命令按鈕。

自定義命令按鈕增強

 如果您指定了自定義命令按鈕模板，您現(xiàn)在可以使用 onClick、cssClass、hint 和 disabled 按鈕屬性。

擴展的 navigateToRow API

方法現(xiàn)在返回一個 Promise 對象，您現(xiàn)在可以在后臺操作完成時收到通知。

虛擬滾動增強

新版本重新設(shè)計了 DataGrid/TreeList 的虛擬滾動引擎并引入了以下增強功能：

• 優(yōu)化了行渲染算法以提高整體 FPS。
• 優(yōu)化數(shù)據(jù)加載算法以減少遠(yuǎn)程數(shù)據(jù)請求的數(shù)量。
• 引入了新的 scrolling.renderAsync 屬性，以便您可以同步或異步呈現(xiàn)行。

改進(jìn)的搜索

當(dāng)用戶在 DataGrid 的搜索面板中搜索數(shù)字時，我們減少了誤報匹配。DataGrid 現(xiàn)在將搜索字符串與原始的和格式化的單元格值匹配，尊重列格式。

例如，如果您的數(shù)字列使用 $#.# 格式并且單元格顯示“$12,000.1”，可以通過“12000.1”或“$12,000.1”定位記錄，相反“12000.1m”與之前的“12000.1”數(shù)字單元格值不匹配。

下圖說明了之前/當(dāng)前實現(xiàn)之間的區(qū)別。

Data Grid

在指定位置添加新行

您現(xiàn)在可以在使用 或 屬性時指定插入新行的位置，這兩個屬性都接受插入新行之前/之后的行的鍵。對于流行的用例，我們添加了一個帶有一組快捷方式值的屬性：

• "first"/"last" - 在數(shù)據(jù)集的開頭/結(jié)尾插入新行。
• "pageTop"/"pageBottom" - 在當(dāng)前頁面的頂部/底部插入新行。
• "viewportTop"/"viewportBottom" - 在viewport的頂部/底部插入一個新行。

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論