组件/树状视图

Blazor Treeview概述

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

《Blazor Ninja》图像的teleerik UI

TreeView组件是《Blazor》的teleerik UI，一个专业级的UI库，有100个本地组件，用于构建现代和功能丰富的应用程序。要想尝试一下，注册一个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目标TreeView从传入的DestinationIndex
           

          
         

         
 @code{ private TelerikTreeView TreeViewRef; }

         
下一个步骤

         
         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

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

     

    
   
   

   
  
  
  
  
  
  
 
Baidu