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

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

DevExpress技術交流群10：532598169      歡迎一起進群討論

全新的TreeList (CTP)組件

新版本發布的DevExpress Blazor TreeList允許您輕松地組織、顯示和導航分層數據，該組件具有以下集成功能：

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

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

綁定到平面數據

DevExpress Blazor TreeList組件可以綁定到任何傳統數據源，由于TreeList被設計為使用樹結構顯示信息，因此它的數據源必須滿足特定的需求。如果數據源包含平面數據，則需要兩個額外字段來構建適當的樹結構：

• 包含節點唯一標識符的字段，將此字段分配給屬性。
• 包含節點父節點的唯一標識符的字段，將此字段分配給屬性。

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

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();
}
}

綁定服務器端數據

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

• TreeList根據需要加載子節點(當用戶展開節點時)。
• 在服務器端執行數據過濾操作。

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

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

綁定到分層數據

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

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();
}
}

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

按需加載數據

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

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

下面的例子按需加載TreeList數據：

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編輯器允許您格式化/顯示文本和可視化內容，并將其存儲為HTML或Markdown。用戶可以應用內聯格式，并根據需要修改字體、大小和顏色。此外，DevExpress Blazor HTML編輯器提供以下集成功能：

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