Blazor的Telerik UI?下载30天免费试用

TreeList数据绑定到层次数据

本文解释了如何将Blazor的树列表绑定到层次数据。在继续之前,请确保您熟悉树列表数据绑定基础知识

层次数据意味着子项集合是在其父模型的字段中提供的。默认情况下,这是项目字段,而分层数据绑定是树列表的默认模式。这种提供项的方法允许您收集独立的数据集合,甚至可能来自不同的来源。

如果某个节点有项目,它将有一个展开图标。的HasChildren字段可以覆盖这个,但是,对于分层数据绑定来说,这不是必需的。

分层数据绑定的示例

@*分层数据项包含子项的集合*@         @code {public List Data {get;设置;} //样本模型公共类Employee{//分层数据集合公共列表 DirectReports {get;设置;} //显示公共int Id {get;设置;}公共字符串名称{获取;设置;}公共字符串EmailAddress{获取; set; } public DateTime HireDate { get; set; } } // data generation // used in this example for data generation and retrieval for CUD operations on the current view-model data public int LastId { get; set; } = 1; protected override async Task OnInitializedAsync() { Data = await GetTreeListData(); } async Task> GetTreeListData() { List data = new List(); for (int i = 1; i < 15; i++) { Employee root = new Employee { Id = LastId, Name = $"root: {i}", EmailAddress = $"{i}@example.com", HireDate = DateTime.Now.AddYears(-i), DirectReports = new List(), // prepare a collection for the child items, will be populated later in the code }; data.Add(root); LastId++; for (int j = 1; j < 4; j++) { int currId = LastId; Employee firstLevelChild = new Employee { Id = currId, Name = $"first level child {j} of {i}", EmailAddress = $"{currId}@example.com", HireDate = DateTime.Now.AddDays(-currId), DirectReports = new List(), // collection for child nodes }; root.DirectReports.Add(firstLevelChild); // populate the parent's collection LastId++; for (int k = 1; k < 3; k++) { int nestedId = LastId; // populate the parent's collection firstLevelChild.DirectReports.Add(new Employee { Id = LastId, Name = $"second level child {k} of {j} and {i}", EmailAddress = $"{nestedId}@example.com", HireDate = DateTime.Now.AddMinutes(-nestedId) }); ; LastId++; } } } return await Task.FromResult(data); } }

上面代码片段的结果

绑定到层次数据的TreeList

另请参阅

在本文中
Baidu
map