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和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress JS & ASP.NET Core v25.1已全新發(fā)布，新版本發(fā)布了全新的CardView組件等，歡迎下載最新版組件體驗(yàn)！

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

報(bào)表設(shè)計(jì)器和報(bào)表查看器的預(yù)覽

全新的CardView組件

DevExtreme v25.1附帶了一個(gè)新的CardView UI組件——一個(gè)傳統(tǒng)數(shù)據(jù)網(wǎng)格的替代品。

DevExtreme v25.1新版的CardView UI組件使用“卡片”布局呈現(xiàn)業(yè)務(wù)數(shù)據(jù)/信息，使其成為員工目錄、聯(lián)系人列表、產(chǎn)品目錄或任務(wù)板的理想選擇（與標(biāo)準(zhǔn)表格相比，CardView視圖往往更吸引人，特別是當(dāng)圖像可視化至關(guān)重要時(shí)）。

每張卡片都包含以下內(nèi)置UI元素：工具欄、封面圖像、卡片內(nèi)容（卡片的字段數(shù)據(jù)）、頁腳，每個(gè)元素都可以使用公共API進(jìn)行定制。

CardView卡片布局完全響應(yīng)，支持多種屏幕尺寸，并附帶兩個(gè)布局選項(xiàng)：

• 自動(dòng)布局：CardView決定每行卡片的最佳數(shù)量和相關(guān)大小。當(dāng)調(diào)整大小時(shí)，CardView動(dòng)態(tài)地修改它的布局，重新計(jì)算每行卡片的數(shù)量和相關(guān)的維度。
• 每行固定的卡數(shù)：您可以指定在布局中顯示的卡的確切數(shù)量。當(dāng)調(diào)整大小時(shí)，卡片大小會(huì)改變，但每行的卡片數(shù)量保持不變。

我們的目標(biāo)是將所有DevExtreme DataGrid數(shù)據(jù)管理功能應(yīng)用到DevExtreme CardView（并提供相同的數(shù)據(jù)相關(guān)功能/靈活性）。您將發(fā)現(xiàn)，新版本的實(shí)現(xiàn)允許任一組件跨多個(gè)使用場景處理相同的數(shù)據(jù)集，比如不同的屏幕分辨率。DevExtreme CardView v25.1支持以下數(shù)據(jù)管理功能：

• 排序：支持單排序和多排序操作。
• 分頁：內(nèi)置的分頁器。
• 列重新排序：您可以允許用戶重新排序列（卡片字段），還可以啟用/禁用特定列的重新排序。
• 列可見性控制：像DataGrid一樣，CardView包含一個(gè)列選擇器，允許用戶控制列可見性。
• 編輯：編輯設(shè)置允許您添加、更新和刪除卡片，點(diǎn)擊編輯按鈕來激活一個(gè)帶有字段的彈出窗口、進(jìn)行編輯、運(yùn)行驗(yàn)證并保存更改。
• 過濾：可作為列標(biāo)題過濾器和過濾面板，產(chǎn)生的篩選器值取決于所有應(yīng)用的篩選器，這些過濾器的同步由filterSyncEnabled屬性控制。
• 搜索：CardView包含一個(gè)搜索面板，它的工作原理和DataGrid一樣。
• 卡片選擇：CardView支持單卡和多卡選擇模式，在多選模式下，工具欄上顯示“Select all”和“Clear selection”按鈕，您可以配置這些按鈕的工作方式——要么針對所有頁面，要么僅針對當(dāng)前頁面。

Header面板

Header面板是CardView中的一個(gè)可視元素，類似于DataGrid中的列標(biāo)題。

該面板允許用戶執(zhí)行以下操作：

• 排序，單擊Header面板項(xiàng)對卡片進(jìn)行排序。
• 重新排序，您可以拖動(dòng)Header面板項(xiàng)來重新排序卡片中的字段，拖放指示器顯示哪些拖放區(qū)域有效、哪些無效。
• 過濾，單擊過濾器圖標(biāo)來訪問值選擇的下拉菜單。
• 列可見性控制，您可以通過將Header面板項(xiàng)拖拽到Column Chooser（當(dāng)使用拖放模式時(shí)）來控制卡片字段的可見性。

更多產(chǎn)品資訊及授權(quán)，歡迎來電咨詢：023-68661681

關(guān)于慧都科技

慧都是?家?業(yè)數(shù)字化解決?案公司，專注于軟件、?油與?業(yè)領(lǐng)域，以深?的業(yè)務(wù)理解和?業(yè)經(jīng)驗(yàn)，幫助企業(yè)實(shí)現(xiàn)智能化轉(zhuǎn)型與持續(xù)競爭優(yōu)勢。

慧都是DevExpress的中國區(qū)的合作伙伴，DevExpress作為用戶界面領(lǐng)域的優(yōu)秀產(chǎn)品，幫助企業(yè)高效構(gòu)建權(quán)限管理、數(shù)據(jù)可視化（如網(wǎng)格/圖表/儀表盤）、跨平臺(tái)系統(tǒng)（WinForms/ASP.NET/.NET MAUI）及行業(yè)定制解決方案，加速開發(fā)并強(qiáng)化交互體驗(yàn)。