向 TreeView 控件添加自定义属性并应用 CSS 到节点

• 下载源代码 - 3.95 KB

引言

本文将展示如何扩展 ASP.NET TreeView 控件，以应用层叠样式表到树节点，以及添加为每个节点存储自定义属性的功能。

背景

内置的 ASP.NET TreeView 控件缺乏许多有用的、能让生活更轻松的功能，尤其是在使用第三方组件时，这些功能非常明显。例如，添加除节点文本和 Value 之外的节点自定义属性或属性，内置的数据绑定支持从具有 ID -> 父 ID 关系的单个自引用表自动绑定，以及向节点或全局TreeView添加自定义样式或模板。

本文将讨论属性和节点自定义，希望我能在后续文章中讨论自动绑定，或者至少尝试一下！

自定义树节点

由于我们正在更改 System.Web.UI.WebControls.TreeNode Text 属性的呈现方式，因此首先需要创建一个继承 TreeNode 的类，并重写 RenderPreText 和 RenderPostText 方法。在 RenderPreText 方法中，我们编写一个 Div 标签，并添加一个 class 属性，将其值设置为 cssClass 属性。

protected override void RenderPreText(HtmlTextWriter writer)
{
    writer.AddAttribute(HtmlTextWriterAttribute.Class, cssClass );
    writer.RenderBeginTag(HtmlTextWriterTag.Div);
    base.RenderPreText(writer);
}

在 RenderPostText 方法中，我们结束 Div 标签。

protected override void RenderPostText(HtmlTextWriter writer)
{
    writer.RenderEndTag();
    base.RenderPostText(writer);
}

添加自定义属性

在某些类型的场景中，您可能需要存储 TreeNode 类未提供的特定于节点的数据。您可以使用 NameValueCollection 集合以名称/值对的形式在集合中存储任意数量的属性。

public NameValueCollection Attributes
{
    get 
    { 
        return this._Attributes;
    }
    set 
    { 
        this._Attributes = value; 
    }
}

Using the Code

private CustomTreeNode CreateNode(string NodeText, string NodeStyle)
{
    CustomTreeNode oNode = new CustomTreeNode();
    oNode.Text = NodeText;
    oNode.cssClass = NodeStyle;
    oNode.Attributes["CustomAttribute1"] = "1";
    oNode.Attributes["CustomAttribute2"] = "2";
    oNode.Attributes["CustomAttribute3"] = "3";
    return oNode;
}

只需创建一个 CustomTreeNode 类的实例，并根据需要设置 cssClass 或 Attributes 属性。我还提供了一个递归函数，该函数在演示应用程序中循环遍历树，并显示节点文本及其相对属性。

关注点

我希望您觉得这篇文章有趣且简单。我想感谢 Danny Chen ，他讨论了节点自定义，这对我撰写本文非常有帮助。