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

TreeList排序

TreeList组件提供排序支持。

要启用排序,请设置可分类的参数真正的

当用户单击列标头时,树列表将根据列的数据类型对数据进行排序,排序方向的箭头指示符将显示在列标题旁边。请注意,保留了层次结构,因此项的父项将出现在项之前。

您可以通过设置来阻止用户对某个字段进行排序可分类的= " false "在它的列上。

您可以在不同的列上对树列表进行排序,排序是根据具体列类型的规则完成的(例如,a的规则字符串是不同于规则的int).

排序保持项的展开/折叠状态。例如,如果过滤将父级被折叠的子级带入视图,您将只看到折叠的父级。

属性可以让用户按多个字段排序SortMode参数Telerik.Blazor.SortMode.Multiple

在Telerik TreeList中启用排序

点击列头按其数据排序      @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); } }

用户在“ID”标头上单击两次以降序排序后,上面代码片段的结果

Blazor TreeList基本排序

您可以从自己的代码中对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); } }

另请参阅

在本文中
Baidu
map