动态 Treeview

分享于 

3分钟阅读

Web开发

  繁體 雙語

介绍

本文描述了如何使用JavaScript创建服务器端 Treeview 以防止回发。

背景

我想使用 Treeview 控件将数据组合在一起,并且不希望在展开折叠时大量回发。 我在ASP中做了这个版本的原始版本,并将它的转换。

使用代码

要使用动态 Treeview,只需将控件放在窗体上,然后加载变量。

将控件放在窗体上之后,你将希望创建 DynamicTreeView 类文件中找到的TreeNodeInfo 项的列表。 TreeNodeInfo 构造函数将为你提供以下功能: 在节点中添加节点名。添加子节点。添加要绑定到该节点的对象。并为活动/非活动节点添加灰色。

初始化

DynamicTreeView 拖到ASPX页上。 在页面的加载或者 LoadComplete 事件中,放置树节点的初始化。

Dim lstTNI asNew List(of TreeNodeInfo)()Dim lstSubNodes asNew List(of TreeNodeInfo)()
lstSubNodes.Add(New TreeNodeInfo("Sub Node 1"))
lstTNI.Add(New TreeNodeInfo("Node1", lstSubNodes.ToArray()))

已经准备好树节点信息列表,现在可以将它们添加到动态 Treeview 控件中。

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}

Points of Interest

我在这里没有太多的兴趣,所以我不关心如何使用服务器端代码,所以我不关心如何使用它。

当我创建它时,我的原始想法是一次将所有节点添加到数据库中。 为此,我添加了 AddNode 方法。 在每次添加过程中,由于我重新生成控件,所以循环会造成严重的性能损失,所以除非你使用页面并添加一些缓慢的内容,否则不推荐使用这种方法。

因为 ASP.NET 动态地重命名所有控件,所以我的JavaScript不是那么热,我在大部分动态控件更改。

Afterthoughts

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


动态    Treeview  
相关文章