组件/树状视图

Blazor Treeview概述

的Blazor Treeview组件以传统的树状结构显示数据。数据本身可以是扁平的或分层的。除了内置的导航功能外，您还可以在项及其子项、定义之间导航模板对于单个节点，呈现文本、复选框和图标，并响应事件。

为Blazor Ninja图像的Telerik UI

TreeView组件是为Blazor的Telerik UI，一个具有100个本地组件的专业级UI库，用于构建现代和功能丰富的应用程序。想要试用它，请注册一个30天的免费试用。

下载免费试用

正在创建Blazor TreeView

  1. 使用TelerikTreeView标签。
  2. 设置TreeView数据的属性IEnumerable < T >．TreeView会自动识别属性名，比如Id，ParentId，文本还有一些其他的。否则,使用绑定配置自定义属性名称．
  3. (可选)设置ExpandedItems的属性非空IEnumerable <对象>．用它来以编程方式展开或折叠项．

具有平面自引用数据和图标的TreeView

 @code {IEnumerable FlatData {get;设置;} IEnumerable ExpandedItems {get;设置;} = new List();受保护覆盖无效OnInitialized() {FlatData = GetFlatData();ExpandedItems = FlatData。Where(x => x. haschildren == true).ToList();} List GetFlatData() {List items = new List();物品。Add(new TreeItem() { Id = 1, Text = "wwwroot", ParentId = null, HasChildren = true, Icon = "folder" }); items.Add(new TreeItem() { Id = 2, Text = "css", ParentId = 1, HasChildren = true, Icon = "folder" }); items.Add(new TreeItem() { Id = 3, Text = "js", ParentId = 1, HasChildren = true, Icon = "folder" }); items.Add(new TreeItem() { Id = 4, Text = "site.css", ParentId = 2, Icon = "css" }); items.Add(new TreeItem() { Id = 5, Text = "scripts.js", ParentId = 3, Icon = "js" }); return 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 string Icon { get; set; } } }
         
数据绑定

         
的TreeView提供灵活的数据绑定具备以下能力:

         
         
选择

         
TreeView支持两种选择模式:

         
         
模板

         
使用模板来定制TreeView项的呈现．为所有级别定义一个模板每个关卡都有不同的模板．

         
拖放

         
用户可以拖放TreeView项目在同一个TreeView内或不同的TreeView之间。

         
         
TreeView可以显示到应用程序视图和外部页面的链接．

         
TreeView参数

         
下表列出了TreeView的参数，与本页的其他特性无关。检查TreeView API参考以获取属性、方法和事件的完整列表。

         
         

          
           

            参数
            类型及默认值
            描述
           

          
          
           

            类
            字符串
            控件上呈现的附加CSS类div.k-treeview元素。使用它来应用自定义样式或覆盖主题．
           

           

            大小
            字符串
“医学博士”		
            影响TreeView布局，例如项目之间的空间大小。可能的有效值为“lg”(大),“医学博士”(介质)和“sm”(小)。为了方便设置，使用类中预定义的字符串属性Telerik.Blazor.ThemeConstants.TreeView.Size．
           

          
         

         
TreeView参考和方法

         
要执行TreeView方法，请通过@ref．

         
TreeView是一个通用组件。它的类型取决于它的模型的类型和它的类型价值．如果你不能提供价值或数据最初，你需要这样做将相应的类型设置为TItem而且TValue参数．

         
下表列出了TreeView方法。也可查阅TreeView API．

         

          
           

            方法
            描述
           

          
          
           

            重新绑定
            刷新组件数据．
           

           

            GetItemFromDropIndex
(字符串索引)		
            获取相应的TItem的目标TreeViewDestinationIndex
           

          
         

         
 @code{ private TelerikTreeView TreeViewRef; }

         
下一个步骤

         
         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

       找不到你需要的帮助?
       
       
        
        
        
         
         
          
         
        改进本文
      

     

    
   
   

   
  
  
  
  
  
  
 
Baidu