TreeView for Asp.NET MVC and Core

使用TreeView显示文档中的标题,索引中的条目,磁盘上的文件和目录,或最佳显示为层次结构的任何其他类型的信息。

发布于 2017/08/31 00:00

ComponentOne Enterprise

概述

使用TreeView显示文档中的标题,索引中的条目,磁盘上的文件和目录,或最佳显示为层次结构的任何其他类型的信息。

TreeView

我们将为此博客的大部分使用以下模型类,因为它返回具有分层数据的数组:

   1:  public class Property
   2:      {
   3:          public string Header { get; set; }
   4:          public string Image { get; set; }
   5:          public bool NewItem { get; set; }
   6:          public Property[] Items { get; set; }
   7:          
   8:  public static  Property[] GetData(string val)
   9:    {
  10:              return new Property[]
  11:              {
  12:                  new Property
  13:                  {
  14:                      Header = "Electronics",
  15:                      Image = "/Content/images/electronics.png",
  16:                      Items = new Property[]
  17:                      {
  18:                          new Property { Header="Trimmers/Shavers" },
  19:                          new Property { Header="Tablets" },
  20:                          new Property { Header="Phones",
  21:                              Image ="/Content/images/phones.png",
  22:                              Items = new Property[] {
  23:                                  new Property { Header="Apple" },
  24:                                  new Property { Header="Motorola", NewItem=true },
  25:                                  new Property { Header="Nokia" },
  26:                                  new Property { Header="Samsung" }}
  27:                          },
  28:                          new Property { Header="Speakers", NewItem=true },
  29:                          new Property { Header="Monitors" }
  30:                      }
  31:                  },
  32:                  new Property{
  33:                      Header = "Toys",
  34:                      Image = "/Content/images/toys.png",
  35:                      Items = new Property[]{
  36:                          new Property{ Header = "Shopkins" },
  37:                          new Property{ Header = "Train Sets" },
  38:                          new Property{ Header = "Science Kit", NewItem = true },
  39:                          new Property{ Header = "Play-Doh" },
  40:                          new Property{ Header = "Crayola" }
  41:                      }
  42:                  },
  43:                  new Property{
  44:                      Header = "Home",
  45:                      Image = "/Content/images/home.png",
  46:                      Items = new Property[] {
  47:                          new Property{ Header = "Coffeee Maker" },
  48:                          new Property{ Header = "Breadmaker", NewItem = true },
  49:                          new Property{ Header = "Solar Panel", NewItem = true },
  50:                          new Property{ Header = "Work Table" },
  51:                          new Property{ Header = "Propane Grill" }
  52:                      }
  53:                  }
  54:              };
  55:          }
  56:      }
Data Binding

因为Bind属性使用了一个IEnumerable源,你可以通过数据绑定TreeView来创建树。 源集合中的每个项目都有关于节点和子节点集合的信息。 DisplayMemberPath属性设置为要显示在树节点中的文本。使用以下代码将ChildItemsPath属性设置为子节点集合:

   1:  @model IEnumerable<TreeViewDemo.Models.Property>
   2:   
   3:  @(Html.C1().TreeView().Id("tv").Bind(Model)
   4:          .DisplayMemberPath("Header")
   5:          .ChildItemsPath("Items"))
显示 Check Boxes

对每个节点显示复选框与设置属性一样简单。 将ShowCheckBoxes属性设置为true以显示复选框

TreeView CheckBoxes

   1:  @(Html.C1().TreeView().Id("tv").Bind(Model)
   2:          .ShowCheckboxes(true)
   3:          .DisplayMemberPath("Name")
   4:        .ChildItemsPath("SubExployees"))
显示图片

您可以通过将ImageMemberPath属性设置为图像路径来自定义每个节点以显示图像和文本

TreeView Images

编辑

允许用户通过将IsReadOnly属性设置为false来编辑节点。 对节点内容进行的编辑将自动传播到与DisplayMemberPath相关联的字段的源集合。 要进一步控制编辑,请使用客户端方法OnClientNodeEditStarting,OnClientNodeEditStarted,OnClientNodeEditEnding和OnClientNodeEditEnded

   1:  @(Html.C1().TreeView().Id("tv").Bind(Model)
   2:          .IsReadOnly(false)
   3:          .DisplayMemberPath("Header")
   4:          .ImageMemberPath("Image")
   5:          .ShowCheckboxes(true)
   6:          .AllowDragging(true)
   7:      .ChildItemsPath("Items"))
拖拽

通过将AllowDragging属性设置为true,允许用户将节点拖到树视图中的新位置。 允许拖动时,用户可以将任何节点拖到树中的任何位置。 您可以通过处理TreeView拖放事件来自定义此行为。

   1:  @(Html.C1().TreeView().Id("tv").Bind(Model)
   2:          .DisplayMemberPath("Header")
   3:          .AllowDragging(true)
   4:      .ChildItemsPath("Items"))
按需加载

当您处理大型分层数据源时,延迟加载很有用,并希望避免一次性加载整个数据集所涉及的延迟。 TreeView控件使得延迟加载变得非常简单。 在绑定属性中,将第二个参数设置为lazyLoadActionUrl,并提供一个URL,以便根据需要获取节点的数据。 如果子节点具有子节点,则可以为该字段设置一个空数组,并将该字段的名称用于ChildItemsPath属性。 否则,可以让该字段为空。

如果你有疑问,可以到GCDN获得技术支持:

http://gcdn.grapecity.com.cn/showforum-68.html

GCDNhttp://gcdn.grapecity.com.cn/

官方网站/developer

 

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商,以“赋能开发者”为使命,致力于通过表格控件、低代码和BI等各类软件开发工具和服务,一站式满足开发者需求,帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年,40余年来始终聚焦软件开发技术,有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的用户社区和丰富的伙伴生态,与超过3000家合作伙伴紧密合作,产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。

相关产品
推荐相关案例
关注微信
葡萄城社区二维码

关注“葡萄城社区”

加微信获取技术资讯

加微信获取技术资讯

想了解更多信息,请联系我们, 随时掌握技术资源和产品动态