TreeList排序
TreeList组件提供排序支持。
要启用排序,请设置可分类的
参数真正的
.
当用户单击列标头时,树列表将根据列的数据类型对数据进行排序,排序方向的箭头指示符将显示在列标题旁边。请注意,保留了层次结构,因此项的父项将出现在项之前。
您可以通过设置来阻止用户对某个字段进行排序可分类的= " false "
在它的列上。
您可以在不同的列上对树列表进行排序,排序是根据具体列类型的规则完成的(例如,a的规则字符串
是不同于规则的int
).
排序保持项的展开/折叠状态。例如,如果过滤将父级被折叠的子级带入视图,您将只看到折叠的父级。
属性可以让用户按多个字段排序SortMode
参数Telerik.Blazor.SortMode.Multiple
.
点击列头按其数据排序 @code {public List data {get;设置;} protected override async任务OnInitializedAsync(){数据=等待GetTreeListData();} //样本模型和数据生成的公共类Employee{公共int Id {get;设置;}公共int?ParentId {get;设置;}公共字符串名称{获取;设置; } } async Task> GetTreeListData() { List data = new List(); for (int i = 1; i < 15; i++) { data.Add(new Employee { Id = i, ParentId = null, Name = $"root: {i}" }); for (int j = 2; j < 5; j++) { int currId = i * 100 + j; data.Add(new Employee { Id = currId, ParentId = i, Name = $"first level child of {i}" }); for (int k = 3; k < 5; k++) { data.Add(new Employee { Id = currId * 1000 + k, ParentId = currId, Name = $"second level child {k} of {i} and {currId}" }); ; } } } return await Task.FromResult(data); } }
您可以从自己的代码中对TreeList进行排序状态.
如果要将初始状态设置为TreeList,请使用类似的代码段,但是在
OnStateInit事件
这个代码片段展示了如何从你的代码中设置排序状态到TreeList。设置排序状态 @code {public TelerikTreeList TreeListRef {get;设置;} = new TelerikTreeList();async任务SetTreeListSort() {var sortedState = new TreeListState() {SortDescriptors = new List() {new SortDescriptor(){Member = name (Employee. id), SortDirection = ListSortDirection。下行}}};等待TreeListRef.SetStateAsync (sortedState);} public List<员工>数据{get;设置;} //样本模型公共类Employee{//分层数据集合公共列表 DirectReports {get; set; } // data fields for display public int Id { get; set; } public string Name { get; set; } public string EmailAddress { get; 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); } }