按需加载TreeList

本文解释了如何按需加载节点到Blazor的树列表中，从而提高性能。在继续之前，请确保您熟悉树列表数据绑定基础知识．按需加载节点可以通过在任何给定时间请求更少的数据来提高应用程序的性能。

您不必一次性提供树列表将呈现的所有数据——根节点对于初始显示已经足够了。然后可以使用OnExpand要提供的树列表的分层数据到刚刚展开或修改的节点平的数据使用新节点的源代码。

在OnExpand事件时，您将收到刚刚展开的当前节点，以便您可以检查是否需要为其加载项。然后可以从数据服务加载这些项并更新相应的数据集合。

你也可以使用HasChildren字段作为标志，以了解是否需要给定节点的数据。这取决于应用程序是否填充它-您可以选择不这样做，但请记住将其设置为假将覆盖子项的存在，并将阻止呈现展开图标，因此用户将永远无法展开节点。因此，您可能希望将该字段默认为真正的只需要将它重置为假如果数据请求没有返回子项。

下面你将看到两个例子——for分层和平数据。

按需加载分层数据

@*这个例子展示了如何按需加载分层数据和处理没有数据返回的一种方式。根据您的模型和数据逻辑，您可能需要调整一些检查，详细信息请查看代码注释。*@       @code {public List Data {get;设置;} //根据需要通过事件async任务OnExpandHandler(TreeListExpandEventArgs args) {Employee item = args。作为员工的项目;如果项目。HasChildren && //它被标记为有子代。DirectReports == null || item.DirectReports. count == 0) //没有子项){//请求数据var children =等待GetChildren(item); if (children.Count > 0) { // child items exist - add them to the current item item.DirectReports = children; } else { // no nested data - hide the expand arrow item.HasChildren = false; } } } async Task> GetChildren(Employee itm) { await Task.Delay(400); // simulate delay. Remove for a real app List data = new List(); // to showcase an example of when no actual child items are returned // we will check for too long nesting chain with this simpe logic if (itm.Name.LastIndexOf("Child of") < 15) { data.Add(new Employee { Name = "Child of " + itm.Name, HasChildren = true }); } return await Task.FromResult(data); } // sample model public class Employee { // hierarchical data collections public List DirectReports { get; set; } public bool HasChildren { get; set; } // data fields for display public string Name { get; set; } public DateTime HireDate { get; set; } } // initial data generation protected override async Task OnInitializedAsync() { List data = new List(); for (int i = 0; i < 6; i++) { data.Add(new Employee { Name = $"root: {i}", HireDate = DateTime.Now.AddYears(-i), HasChildren = true }); } // mark an item as non-expandable (not having children) data[1].HasChildren = false; data[1].Name += "(not expandable) "; Data = data; } }

按需加载平面数据

@*这个示例显示了如何按需加载平面数据和处理无数据返回的一种方式。根据您的模型和数据逻辑，您可能需要调整一些检查，详细信息请查看代码注释。*@       @code {public List Data {get;设置;} //按需加载通过事件异步任务OnExpandHandler(TreeListExpandEventArgs args) {Employee currItem = args。作为员工的项目;如果(currItem。HasChildren&& // it is marked as having children !Data.Any(x => x.ReportsTo == currItem.Id) // there are no child items ) { // request data var children = await GetChildren(currItem); if (children.Count > 0) { // child items exist - add them to the main data collection Data.AddRange(children); } else { // no nested data - hide the expand arrow currItem.HasChildren = false; } } } async Task> GetChildren(Employee itm) { await Task.Delay(400); // simulate delay. Remove for a real app List data = new List(); // to showcase an example of when no actual child items are returned // we will check for too long nesting chain with this simpe logic if (itm.Name.LastIndexOf("Child of") < 15) { data.Add(new Employee { Id = LastId++, ReportsTo = itm.Id, Name = "Child of " + itm.Name, HasChildren = true }); } return await Task.FromResult(data); } // sample model public class Employee { // hierarchical data collections public int Id { get; set; } public int? ReportsTo { get; set; } public bool HasChildren { get; set; } // data fields for display public string Name { get; set; } public DateTime HireDate { get; set; } } // initial data generation int LastId { get; set; } = 0; protected override async Task OnInitializedAsync() { List data = new List(); for (int i = 0; i < 6; i++) { data.Add(new Employee { Id = LastId++, ReportsTo = null, Name = $"root: {i}", HireDate = DateTime.Now.AddYears(-i), HasChildren = true }); } // mark an item as non-expandable (not having children) data[1].HasChildren = false; data[1].Name += "(not expandable) "; Data = data; } }

另请参阅

• TreeList数据绑定基础
• 现场演示:按需加载TreeList
• 绑定到平面数据
• 绑定到层次数据