组件/树状视图/选择

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

TreeView中的多重选择

TreeView允许用户选择多个节点。

在本文中:

基础知识

使用多个节点选择，设置SelectionMode参数Telerik.Blazor.TreeViewSelectionMode.Multiple．

来选择一个节点范围转变键并单击两个节点。中间的所有项目都将被选中。如果有一个焦点节点，范围选择从该节点开始。

要选择多个不相邻的节点，请按住Ctrl按下并单击所需的项目。

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

例子

本节举例如下:

使用单向数据绑定的多重选择

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

@*使用单向数据绑定处理多个节点选择*@   @if (selecteditem . any ()) {
 Selected items: 
 foreach (var item in SelectedItems) {
 Icon:  Title: @((item as TreeItem).Text) Id: @((item as TreeItem).Id)  
}} @code {public IEnumerable SelectedItems {get;设置;} = new List();public IEnumerable Data {get;设置;} public IEnumerable ExpandedItems {get;设置;} = new List(); void SelectedItemsChangedHandler(IEnumerable items) { SelectedItems = items; } 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 ()) {
 选定项目: 
 foreach (var项目在SelectedItems) {
 Icon:  Title: @((item as TreeItem).Text) Id: @((item as TreeItem).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; } } }
         

          
上面代码片段的结果

         

         
选择多个实例

         
处理不同数据模型的多重选择

         
您可以在每一层将树视图绑定到不同的模型，并且选择适应了这一点。您需要确保将节点强制转换为正确的类型。

         
@*处理来自不同数据模型的多项选择*@  items) => SelectedItemsHandler(items)) "" > < TreeViewBindings > < TreeViewBinding TextField =“类别”ItemsField = "产品" / > < TreeViewBinding水平=“1”TextField = " ProductName " / > < / TreeViewBindings > < / TelerikTreeView > @ if (SelectedItems.Any ()) {foreach (var设置selecteditem项){如果ProductCategoryItem(项目){< div > < >强选择项目:< /强> < span > <强>类别:< /强> @((项ProductCategoryItem) .Category) < / span > < / div >}其他{< div > < >强选择项目:< /强> < span > < >强产品名称:< /强> @(项目ProductItem).ProductName)  } } } @code { public IEnumerable HierarchicalData { get; set; } public IEnumerable SelectedItems { get; set; } = new List(); public IEnumerable ExpandedItems { get; set; } = new List(); void SelectedItemsHandler(IEnumerable items) { SelectedItems = items; } public class ProductCategoryItem { public string Category { get; set; } public List Products { get; set; } } public class ProductItem { public string ProductName { get; set; } } protected override void OnInitialized() { LoadHierarchical(); ExpandedItems = HierarchicalData.Where(x => x.Products != null && x.Products.Any()).ToList(); } private void LoadHierarchical() { List roots = new List(); List firstCategoryProducts = new List() { new ProductItem { ProductName= "Category 1 - Product 1" }, new ProductItem { ProductName= "Category 1 - Product 2" } }; roots.Add(new ProductCategoryItem { Category = "Category 1", Products = firstCategoryProducts // this is how child items are provided }); roots.Add(new ProductCategoryItem { Category = "Category 2" // we will set no other properties and it will not have children, nor will it be expanded }); HierarchicalData = roots; } }
         

          
上面代码片段的结果

         

         
选择多个实例

         
另请参阅

         
        
       
      
      
     
     

      

       

        在本文中

       
      

      
      

       

        相关文章

       
      

      
      

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

     

    
   
   

   
  
  
  
 
Baidu