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); } }
上面代码片段的结果