DevExpress Blazor UI組件使用了C#為Blazor Server和Blazor WebAssembly創(chuàng)建高影響力的用戶體驗，這個UI自建庫提供了一套全面的原生Blazor UI組件（包括Pivot Grid、調(diào)度程序、圖表、數(shù)據(jù)編輯器和報表等）。

DevExpress Blazor控件目前已經(jīng)升級到v24.1版本了，此版本發(fā)布了全新的TreeList組件、HTML編輯器、PDF查看器等，歡迎下載最新組件體驗！

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

全新的TreeList (CTP)組件

新版本發(fā)布的DevExpress Blazor TreeList允許您輕松地組織、顯示和導(dǎo)航分層數(shù)據(jù)，該組件具有以下集成功能：

• 數(shù)據(jù)排序
• 篩選行與自動生成的編輯器
• 總摘要
• 單節(jié)點和多節(jié)點選擇
• 聚焦行
• Header Bands
• 分頁和滾動
• 虛擬滾動
• 工具欄
• 鍵盤支持

您將注意到DevExpress Blazor TreeList和Grid UI組件的外觀和行為操作相似，DevExpress Blazor TreeList和Grid使用相同的渲染引擎，并依賴于共同的邏輯/算法。由于組件之間的通用性，我們會在未來的發(fā)布周期中同時向這兩個組件添加新功能。

綁定到平面數(shù)據(jù)

DevExpress Blazor TreeList組件可以綁定到任何傳統(tǒng)數(shù)據(jù)源，由于TreeList被設(shè)計為使用樹結(jié)構(gòu)顯示信息，因此它的數(shù)據(jù)源必須滿足特定的需求。如果數(shù)據(jù)源包含平面數(shù)據(jù)，則需要兩個額外字段來構(gòu)建適當(dāng)?shù)臉浣Y(jié)構(gòu)：

• 包含節(jié)點唯一標(biāo)識符的字段，將此字段分配給屬性。
• 包含節(jié)點父節(jié)點的唯一標(biāo)識符的字段，將此字段分配給屬性。

下面的例子將Blazor TreeList組件綁定到一個平面數(shù)據(jù)源：

Razor

@inject IEmployeeTaskDataProvider EmployeeTaskDataProvider
<DxTreeList Data="@TreeListData"
KeyFieldName="Id"
ParentKeyFieldName="ParentId">
<Columns>
<DxTreeListDataColumn FieldName="Name" />
<DxTreeListDataColumn FieldName="EmployeeName"/>
<DxTreeListDataColumn FieldName="StartDate" />
<DxTreeListDataColumn FieldName="DueDate" />
</Columns>
</DxTreeList>

@code {
List<EmployeeTask> TreeListData { get; set; }
protected override void OnInitialized () {
TreeListData = EmployeeTaskDataProvider.GenerateData();
}
}

綁定服務(wù)器端數(shù)據(jù)

您也可以將DevExpress Blazor TreeList 組件綁定到，此數(shù)據(jù)源允許您在綁定大型數(shù)據(jù)集時提高TreeList性能，原因如下：

• TreeList根據(jù)需要加載子節(jié)點(當(dāng)用戶展開節(jié)點時)。
• 在服務(wù)器端執(zhí)行數(shù)據(jù)過濾操作。

要將組件綁定到，您必須：

• 將 實例分配給屬性
• 指定和 屬性。
• 指定屬性，此屬性有助于確定節(jié)點是否包含子節(jié)點以及節(jié)點是否需要展開按鈕。

綁定到分層數(shù)據(jù)

如果數(shù)據(jù)源中的每個節(jié)點都包含一個帶有子節(jié)點列表的字段，則將該字段的名稱分配給ChildrenFieldName屬性并將data屬性綁定到數(shù)據(jù)源：

Razor

@inject ISpaceObjectDataProvider SpaceObjectDataProvider
<DxTreeList Data="@TreeListData"
ChildrenFieldName="Satellites">
<Columns>
<DxTreeListDataColumn FieldName="Name"/>
<DxTreeListDataColumn FieldName="TypeOfObject" Caption="Type"/>
<DxTreeListDataColumn FieldName="Mass" Caption="Mass, kg"/>
<DxTreeListDataColumn FieldName="MeanRadius" Caption="Radius, km"/>
</Columns>
</DxTreeList>

@code {
List<SpaceObject> TreeListData { get; set; }
protected override void OnInitialized () {
TreeListData = SpaceObjectDataProvider.GenerateData();
}
}

或者您可以將一組根節(jié)點分配給Data屬性，并處理 事件來用子節(jié)點填充節(jié)點。在事件處理程序中，使用參數(shù)確定處理的節(jié)點，并將該節(jié)點的子節(jié)點分配給屬性。

按需加載數(shù)據(jù)

DevExpress Blazor TreeList允許您最初只加載根節(jié)點，并在節(jié)點第一次擴(kuò)展時檢索節(jié)點子節(jié)點。要將組件切換到按需模式，請遵循以下步驟：

• 將根數(shù)據(jù)項分配給屬性。
• 指定屬性。
• 處理事件，在事件處理程序中，使用參數(shù)確定處理的節(jié)點，并將節(jié)點的子節(jié)點分配給事件參數(shù)。

下面的例子按需加載TreeList數(shù)據(jù)：

Razor

@inject FileSystemDataProvider FileSystemDataProvider
<DxTreeList Data="TreeListData"
HasChildrenFieldName="HasChildren"
ChildrenLoadingOnDemand="TreeList_ChildrenLoadingOnDemand">
<Columns>
<DxTreeListDataColumn FieldName="Name" />
<DxTreeListDataColumn FieldName="Type" />
<DxTreeListDataColumn FieldName="DateModified" />
<DxTreeListDataColumn FieldName="Size" />
</Columns>
</DxTreeList>

@code {
object TreeListData { get; set; }
protected override async Task OnInitializedAsync() {
Data = await FileSystemDataProvider.GetRootItemsAsync();
}
Task TreeList_ChildrenLoadingOnDemand(TreeListChildrenLoadingOnDemandEventArgs e) {
var item = e.Parent as FileSystemDataItem;
e.Children = item.Children;
return Task.CompletedTask;
}
}

新的HTML編輯器

DevExpress Blazor HTML編輯器允許您格式化/顯示文本和可視化內(nèi)容，并將其存儲為HTML或Markdown。用戶可以應(yīng)用內(nèi)聯(lián)格式，并根據(jù)需要修改字體、大小和顏色。此外，DevExpress Blazor HTML編輯器提供以下集成功能：

• 塊格式，包括標(biāo)題、文本對齊、列表(項目符號和編號)、代碼塊和引號。
• 變量支持(例如，{{companyName}})：在其他用例中，此功能可用于生成動態(tài)電子郵件內(nèi)容。
• 具有自適應(yīng)布局支持的工具欄。
• 內(nèi)置工具欄自定義。
• 圖片插入：可以從本地文件系統(tǒng)上傳圖片，也可以指定URL。
• 表格支持。
• 提示支持。