动态树视图

• 下载源代码 - 6.28 KB

引言

本文介绍了如何使用 JavaScript 创建一个服务器端树视图，以防止回发。

背景

我想使用树视图控件来分组我的数据，并且不希望在展开和折叠时进行大量回发。 我最初是用 ASP 做的，并且将其中的大部分都转换过来了。

Using the Code

要使用动态树视图，只需将控件放在表单上并加载变量即可。

将控件放在表单上后，您需要创建 TreeNodeInfo 项目的列表，如 DynamicTreeView 类文件中所示。 TreeNodeInfo 构造函数将使您能够：添加节点名称、添加子节点、添加要与节点关联的对象以及使活动/非活动选择变灰。

初始化

将 DynamicTreeView 拖到您的 ASPX 页面上。 在您的页面的 Load 或 LoadComplete 事件中，放置您对树节点的初始化。

Dim lstTNI as New List(of TreeNodeInfo)()
Dim lstSubNodes as New List(of TreeNodeInfo)()

lstSubNodes.Add(New TreeNodeInfo("Sub Node 1"))
lstTNI.Add(New TreeNodeInfo("Node1", lstSubNodes.ToArray()))

现在您已经准备好了树节点信息列表，您就可以将它们添加到动态树视图控件中。

Me.DynamicTreeView1.AddNodeRange(lstTNI.ToArray())

每个节点都有一个 JavaScript 双击事件与之关联。 对于我的特定项目，我只需要主节点具有双击事件，所以我创建了 ItemDoubleClicked(Item) 方法。

var dblClick;
function ItemDoubleClicked(Item)
{
    if (dblClick != null)
        dblClick(Item);
}

这使用了在 C# 中找到的事件处理程序的样式，它只是一个被调用的对象。 如果您希望实现双击事件，您可以创建另一段 JavaScript，如下所示：

function init()
{
    dblClick = DoubleClickHandler;
}
function DoubleClickHandler(item)
{
    //Do Work Here
}

关注点

随意尝试 HTML 格式，我不擅长这个，但是该控件完成了我需要的功能，因此在我最终弄清楚之前，我没有兴趣摆弄我的服务器端代码。

当我创建它时，我的最初想法是当它们从数据库中传入时一次添加所有节点。 为此，我添加了 AddNode 方法。 由于循环遍历此方法会导致严重的性能问题，因为我每次添加时都会重新构建控件，因此我不推荐此方法，除非您在页面内工作并缓慢地添加内容（用户添加）。

由于 ASP.NET 具有动态重命名所有控件的令人难以置信的优点，并且我的 JavaScript 并不太好，因此我不得不在我的大多数动态控件更改的开头包含一个前缀。

事后思考

在 ASP.NET AJAX 中做了更多工作后，我了解到这个控件可以在 AJAX 中相当容易地复制。 但是，如果您无法在您的页面中使用 AJAX，这是一个不错的解决方案，并且可以相当容易地移植到 ASP。