Blazor TreeList组件概述
的Blazor TreeList组件以表格格式显示层次数据并允许排序，过滤，数据编辑；提供项目选择，模板而且按需负荷．
TreeList组件是Blazor的Telerik UI，一个专业级的UI库，包含100个本地组件，用于构建现代和功能丰富的应用程序。想要试用它，可以注册一个30天的免费试用期。
创建Blazor TreeList
TreeList同时支持平面数据和分层数据。下面的示例使用平面数据。
- 使用
< TelerikTreeList >标签。 - 分配树列表
数据属性的IEnumerable < TItem >财产。模型类TItem应该有两个属性来描述父子关系，例如:Id（int),ParentId（int ?）. - 配置TreeList参数
项属性名称:IdField而且ParentIdField． - 添加一些
< TreeListColumn >实例。< TreeListColumns >标签。 - 对于每一列，设置
场这是可选的标题． - 集
可扩展的= " true "对于应该呈现展开/折叠箭头的列。 - (可选)启用其他特性，例如
可分页，可分类的或FilterMode．
基本TreeList
@code {List TreeListData {get;设置;} protected override void OnInitialized() {TreeListData = new List();For (int I = 1;I <= 9;i++) {TreeListData。添加(新员工(){Id = i, ParentId = i <= 3 ? null : i % 3 + 1, FirstName = "First " + i, LastName = "Last " + i, Position = i <= 3 ? "Team Lead" : "Software Engineer" }); } base.OnInitialized(); } public class Employee { public int Id { get; set; } public int? ParentId { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public string Position { get; set; } } } 数据绑定
Telerik Blazor TreeList是数据源不可知的。您可以根据您的项目使用任何数据库和服务。重要的步骤是配置模型属性名，它定义了数据结构。
以下资源提供了TreeList数据绑定的详细信息和示例:
- TreeList数据绑定概述-关于数据绑定工作原理的一般信息
- 将树列表绑定到平面自引用数据
- 将树列表绑定到层次数据—在这种情况下，每个数据项可能包含一个嵌套的项集合
- 在树列表中按需加载-如何只在必要时加载子项目
数据操作
Blazor TreeList支持开箱即用的所有基本数据操作:
编辑
TreeList可以对其当前数据执行CRUD操作。它公开事件，使您可以控制操作并将更改传输到实际数据源。看到TreeList CRUD操作概述欲知详情。
列的功能
Treelist列是它的主要构建块之一。它们提供了一组丰富的功能，为不同的应用程序场景提供了灵活性。
模板
各种各样的TreeList模板提供更好的渲染控制:
更多TreeList特性
TreeList参数
下表为树列表参数，与本页其他特性无关。检查TreeList API参考获取属性、方法和事件的完整列表。
| 参数 | 类型及默认值 | 描述 |
|---|---|---|
类 |
字符串 |
对象所呈现的附加CSS类div.k-treelist元素。使用它来应用自定义样式或超越主题．例如,改变TreeList字体大小． |
高度 |
字符串 |
中的高度值任何支持的CSS单元． |
通航 |
保龄球 |
是否键盘导航启用。 |
宽度 |
字符串 |
中的宽度值任何支持的CSS单元．TreeList没有默认宽度，但水平展开以填充其容器。 |
TreeList引用和方法
TreeList组件有一些方法来执行动作，比如:
要执行这些方法，请通过获取对Grid实例的引用@ref．
TreeList是一个通用组件。它的类型取决于它的模型的类型和对象的类型价值．如果你不能提供价值或数据最初，你需要将相应的类型设置为TItem而且TValue参数．
存储TreeList实例引用并执行方法
Autofit All Columns @code {TelerikTreeList TreeListRef {get;设置;} public List<员工>数据{get;设置;} void AutoFit() {TreeListRef.AutoFitAllColumns();} protected override void OnInitialized(){数据=新列表<员工>();var rand = new Random();int currentId = 1;For (int I = 1;I < 6; i++) { Data.Add(new Employee() { EmployeeId = currentId, ReportsTo = null, FirstName = "Employee " + i.ToString() }); currentId++; } for (int i = 1; i < 6; i++) { for (int j = 0; j < 5; j++) { Data.Add(new Employee() { EmployeeId = currentId, ReportsTo = i, FirstName = " Employee " + i + " : " + j.ToString() }); currentId++; } } } public class Employee { public int EmployeeId { get; set; } public string FirstName { get; set; } public int? ReportsTo { get; set; } } }