TreeList选择
树列表组件提供行选择支持。
在本文中:
选择基础知识
您可以通过设置来配置选择行为SelectionMode的成员Telerik.Blazor.TreeListSelectionMode枚举。行选择可以是:
要选择一行，单击它。若要选择多个行，请按住Ctrl或转变键扩展所选内容。
您还可以使用复选框列来选择行。要使用它，请添加TreeListCheckboxColumn在TreeListColumns树列表的集合。它适用于两种选择模式。与多重选择模式，复选框列提供额外的功能．
方法获取或设置所选项设置selecteditem财产。它是树列表项的集合数据．
的单一的选择而且多个选择文章提供了使用树列表特性的更多示例和详细信息。
示例—启用行选择(多个)
@*查看如何启用选择和使用TreeList提供的SelectedItems *@ @if (selectedititems . any ()) { @foreach(员工项目在SelectedItems中){- @项目。Id
}
} @code {public List Data {get;设置;} public IEnumerable SelectedItems {get;设置;} = Enumerable.Empty<雇员>();//样本模型公共类Employee{公共int Id {get;设置;} public List DirectReports {get;设置; } 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(), }; 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(), }; root.DirectReports.Add(firstLevelChild); LastId++; for (int k = 1; k < 3; k++) { int nestedId = LastId; 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); } } 示例-只选择带复选框的行
@*要求单击复选框进行行选择*@ @code {public List Data {get;设置;} //样本模型公共类Employee{公共int Id {get;设置;} public List DirectReports {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(), }; 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(), }; root.DirectReports.Add(firstLevelChild); LastId++; for (int k = 1; k < 3; k++) { int nestedId = LastId; 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); } } 笔记
编辑模式
编辑模式
在Incell编辑模式选项只能通过复选框列（< TreeListCheckboxColumn / >)．这是必需的，因为触发选择和InCell编辑的重叠操作(在行中单击)-如果InCell编辑启用了行单击选择，每次尝试选择一行都会将单元格置于编辑模式;每次尝试编辑一个单元格都会选择一个新行。这样的用户体验令人困惑，因此只能通过行选择复选框进行选择。
属性可以查看如何在InCell编辑模式下选择正在编辑的行< TreeListCheckboxColumn / >请查看用InCell编辑模式编辑网格行选择知识库文章——它是针对网格组件的，但概念是相同的。
内联和弹出编辑模式
在内联编辑模式而且弹出编辑模式可以通过单击所需的行或使用< TreeListCheckboxColumn />．
在模板中选择
当使用树列表时模板如果你想在用户点击的时候阻止选择被触发，你应该添加@onclick: stopPropagation指向元素的指令。
防止用户在模板内单击时发生行选择
如果您正在使用行模板时，树列表不能为您呈现选择复选框，因此您必须自己将它们绑定到模型中的字段，并处理它们的选择更改事件以填充设置selecteditem树列表的集合。你可以在下面的线程中找到一个开始的例子(它是针对网格的，但概念是相同的):带选择的网格行模板-不确定如何绑定到所选项目
异步操作
异步操作(如按需加载数据)应该在OnExpand，OnRowClick或OnRowDoubleClick事件，而不是在SelectedItemsChanged事件。
处理数据更改
当树列表数据集合更改时，设置selecteditem集合具有以下行为:
如果树列表有不使用一个
ObservableCollection为其数据- - -设置selecteditem收藏将被保留。当根据需要和业务逻辑更改数据时，需要清除或操作它。- 如果更新或删除项，则必须通过树列表对所选项进行相同的更新编辑事件．
当使用
ObservableCollection对于树列表数据-如果删除了一个项或使用集合清除了整个数据.Clear ()方法时，它将自动更新设置selecteditem集合(删除的数据项将从选定项集合中删除)。- 对于其他CRUD操作(创建和更新)，您应该使用树列表编辑事件根据您的业务逻辑和首选行为来处理这种情况。
- 当数据发生变化且所选项被清除时，会触发
SelectedItemsChanged事件将与空集合一起触发。如果使用双向绑定，则集合将被清除。