组件/树状视图/选择

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

在TreeView中进行单个选择

TreeView允许用户一次选择一个节点。

在本文中:

基础知识

使用单节点选择，设置SelectionMode参数Telerik.Blazor.TreeViewSelectionMode.Single．

要取消选择该节点，请按住Ctrl键并点击它。

例子

本节举例如下:

使用单向数据绑定选择单个节点

可以使用单向绑定提供初始节点选择，并响应SelectedItemsChanged当用户选择发生时更新视图模型。如果您不更新模型，选择将被有效地取消。如果要根据所选节点按需加载异步数据，请使用OnItemClick事件。

@*使用单向数据绑定处理单节点选择*@  item) => SelectedItemsHandler(item)))">  @if (SelectedItems.Any()) {TreeItem selectedItem = SelectedItems.FirstOrDefault() as TreeItem;
 Selected item: 
 Icon:  Title: @selectedItem。Text Id: @selectedItem。Id  
 
} @code {void SelectedItemsHandler(IEnumerable item) {SelectedItems = item;} public IEnumerable SelectedItems {get;设置;} = new List();public IEnumerable Data {get;设置;} public IEnumerable ExpandedItems {get;设置; } = new List(); protected override void OnInitialized() { LoadData(); ExpandedItems = Data.Where(x => x.HasChildren == true).ToList(); } private void LoadData() { List items = new List(); items.Add(new TreeItem() { Id = 1, Text = "Project", ParentId = null, HasChildren = true, Icon = FontIcon.Folder }); items.Add(new TreeItem() { Id = 2, Text = "Design", ParentId = 1, HasChildren = true, Icon = FontIcon.Brush }); items.Add(new TreeItem() { Id = 3, Text = "Implementation", ParentId = 1, HasChildren = true, Icon = FontIcon.Folder }); items.Add(new TreeItem() { Id = 4, Text = "site.psd", ParentId = 2, HasChildren = false, Icon = FontIcon.FilePsd }); items.Add(new TreeItem() { Id = 5, Text = "index.js", ParentId = 3, HasChildren = false, Icon = FontIcon.Js }); items.Add(new TreeItem() { Id = 6, Text = "index.html", ParentId = 3, HasChildren = false, Icon = FontIcon.Html5 }); items.Add(new TreeItem() { Id = 7, Text = "styles.css", ParentId = 3, HasChildren = false, Icon = FontIcon.Css }); Data = items; } public class TreeItem { public int Id { get; set; } public string Text { get; set; } public int? ParentId { get; set; } public bool HasChildren { get; set; } public FontIcon? Icon { get; set; } } }
         

          
上面代码片段的结果

         

         
选择单个示例

         
使用双向数据绑定选择单个节点

         
您可以使用双向绑定来获取用户所选择的节点。如果节点模型已经包含了基于选择需要显示的所有信息，那么这将非常有用。

         
@*使用双向数据绑定处理单节点选择*@   @if (selectedititems . any ()) {TreeItem selectedItem = selectedititems . firstordefault () as TreeItem;
 Selected item: 
 Icon:  Title: @selectedItem。Text Id: @selectedItem。Id  
 
} @code {public IEnumerable SelectedItems {get;设置;} = new List();public IEnumerable Data {get;设置;} public IEnumerable ExpandedItems {get;设置;} = new List(); protected override void OnInitialized() { LoadData(); ExpandedItems = Data.Where(x => x.HasChildren == true).ToList(); } private void LoadData() { List items = new List(); items.Add(new TreeItem() { Id = 1, Text = "Project", ParentId = null, HasChildren = true, Icon = FontIcon.Folder }); items.Add(new TreeItem() { Id = 2, Text = "Design", ParentId = 1, HasChildren = true, Icon = FontIcon.Brush }); items.Add(new TreeItem() { Id = 3, Text = "Implementation", ParentId = 1, HasChildren = true, Icon = FontIcon.Folder }); items.Add(new TreeItem() { Id = 4, Text = "site.psd", ParentId = 2, HasChildren = false, Icon = FontIcon.FilePsd }); items.Add(new TreeItem() { Id = 5, Text = "index.js", ParentId = 3, HasChildren = false, Icon = FontIcon.Js }); items.Add(new TreeItem() { Id = 6, Text = "index.html", ParentId = 3, HasChildren = false, Icon = FontIcon.Html5 }); items.Add(new TreeItem() { Id = 7, Text = "styles.css", ParentId = 3, HasChildren = false, Icon = FontIcon.Css }); Data = items; } public class TreeItem { public int Id { get; set; } public string Text { get; set; } public int? ParentId { get; set; } public bool HasChildren { get; set; } public FontIcon? Icon { get; set; } } }
         

          
上面代码片段的结果

         

         
选择单个示例

         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

       找不到你需要的帮助?
       
       
        
        
        
         
         
          
         
        改进这篇文章
      

     

    
   
   

   
  
  
  
 
Baidu