概述
使用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以显示复选框
1: @(Html.C1().TreeView().Id("tv").Bind(Model)
2: .ShowCheckboxes(true)
3: .DisplayMemberPath("Name")
4: .ChildItemsPath("SubExployees"))
显示图片
您可以通过将ImageMemberPath属性设置为图像路径来自定义每个节点以显示图像和文本
编辑
允许用户通过将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
GCDN：http://gcdn.grapecity.com.cn/
官方网站：/developer
