ASP.NET 应用程序的另一个树状网页控件

• 下载源代码文件 - 11.9 Kb
• 下载演示项目 - 79.2 Kb

引言

尽管有许多类似的控件可用，本文提出了另一个树状网页控件实现，用于 ASP.NET 应用程序。我的树实现 (I3HTreeCtrl) 的主要区别之一是能够只在需要时加载数据。这使得 I3HTreeCtrl 在存在非常大的数据树时非常适用。

数据仅在相关树节点需要显示时才被请求；请求通过 I3HTreeCtrl 网页控件触发的事件发生。基本上，使用 I3HTreeCtrl 控件的 ASP.NET 应用程序只需处理 OnAddFolders 和 OnAddItems 事件，这些事件分别请求特定父节点下的文件夹和项目（叶子）节点。此外，还预见了一个缓存机制（可选），以避免多次请求相同的数据。

I3HTreeCtrl

属性

I3HLoadStyle	定义控件的加载方式 eLoadWhenExpand（默认） 控件仅在需要时才请求树节点数据；也就是说，用户打开一个节点并希望显示其子节点。 eLoadAll 控件在第一次加载时请求所有数据。
I3HCacheStyle	启用/禁用控件缓存 eCacheEnabled（默认） 每个节点仅请求一次。 eNoCache 控件在每次显示节点时触发节点数据请求。
I3HTreeStyle	设置树样式 eTreeNormal eTreeCheckBox 使用此样式，每个项目都可以处于选中或未选中状态。选中/未选中状态使用特定图像显示。
I3HTreeOrderStyle	设置树排序样式 eTreeFoldersItems 文件夹在项目之前显示。 eTreeItemsFolders 项目在文件夹之前显示。
I3HTreeSelectStyle	设置树选择样式 eTreeSelectNormal 单击文件夹图标会展开或折叠子树，而单击文件夹名称会选择文件夹（应用选定样式）。 eTreeSelectCollaspeExpand 使用此样式，单击文件夹名称会导致子树展开或折叠。
I3HRootOpenImage	设置根节点展开时显示的图像文件。
I3HRootCloseImage	设置根节点折叠时显示的图像文件。
I3HFolderOpenImage	设置任何文件夹节点展开时显示的图像文件。
I3HFolderCloseImage	设置任何文件夹节点折叠时显示的图像文件。
I3HItemDefaultImage	设置显示项目节点时默认显示的图像文件；可以为每个项目指定不同的图像，如果没有指定图像，则使用默认图像。
I3HItemCheckedImage	仅适用于 eTreeCheckBox 样式。设置项目节点被选中时显示的图像文件。
I3HItemUncheckedImage	仅适用于 eTreeCheckBox 样式。设置项目节点未被选中时显示的图像文件。
I3HRootKey	根节点的键。
I3HRootCaption	根节点的标题。

方法

SelectNode	选择一个节点；它会导致树展开以使节点可见。该方法仅适用于已加载的节点。
GetSelectedNodeKey	返回当前选定节点的键。
GetSelectedNodeCaption	返回当前选定节点的标题。
GetNodeCaption	返回请求节点的标题。
SetNodeCaption	更改请求节点的标题。
SetItemImage	更改请求节点的图像。仅适用于项目。
IsItemChecked	返回请求项目是否被选中。
CheckItem	选中请求的项目。
GetCheckedItemList	返回所有当前选中项目的数组。
ClearCheckItemList	取消选中所有项目。
GetTreeObject	返回 I3HTree 对象。

事件

OnAddFolders	当树控件需要文件夹信息时触发。提供了父节点键。被调用的组件需要用子文件夹键和标题填充一些数组。
OnAddItems	当树控件需要文件夹信息时触发。提供了父节点键。被调用的组件需要用子项目键和标题填充一些数组。
OnSelectChange	当选定节点更改时触发。
OnNodeCollaspe	当节点折叠时触发。
OnNodeExpanded	当节点展开时触发。
OnNodeChecked	当节点被选中时触发。
OnNodeUnchecked	当节点未被选中时触发。

如何使用 I3HTreeCtrl

使用 I3HTreeCtrl 非常简单。您只需在项目中添加对 I3HTreeCtrl.dll 的引用；然后，网页窗体工具箱中将显示一个新图标。然后，您可以简单地将控件拖放到网页窗体中。

完成后，类似于以下的代码行将出现在“网页窗体设计器生成的代码”区域中。

Protected WithEvents i3htree As I3HTreeCtrl.I3HTreeCtrl

在 Page_Load 方法中，您可以设置任何控件属性来决定树的行为或更改默认的 CSS 样式或图像。例如

i3htree.I3HRootCaption = "my products"
i3htree.I3HRootKey = "MyRootKey"
i3htree.I3HTreeStyle = enumTreeStyle.eTreeCheckBox

可以通过更改 CSS 样式和图像来更改树的布局。您正在处理的页面应包含一个 CSS 文件

<LINK href="i3htree.css" type="text/css" rel="stylesheet">

该文件包含与控件属性中定义的树对象相关的样式。

要创建树，您需要将代码放入 IH3TreeCtrl 的两个主要事件处理程序中：OnAddFolders 和 OnAddItems。文件夹是可展开和折叠的树节点，而项目是树的叶子。

Private Sub i3htree_OnAddFolders( _
              ByVal sParentKey As String, _
              ByRef aKey As System.Collections.ArrayList, _
              ByRef aCaption As System.Collections.ArrayList) _
              Handles i3htree.OnAddFolders

当用户在由 sParentKey 字符串标识的节点下展开子树时，将调用此方法，第一次调用该方法时使用根键（默认情况下为 ROOT，但可以使用 I3HRootKey 属性更改）。

被调用的应用程序应填充 aKey 和 aCaption 数组。aKey 值将用于后续的 OnAddFolder 和 OnAddItems 事件，而 aCaption 值是显示的树节点描述。

Private Sub i3htree_OnAddItems( _
              ByVal sParentKey As String, _
              ByRef aKey As System.Collections.ArrayList, _
              ByRef aCaption As System.Collections.ArrayList, _
              ByRef aImage As System.Collections.ArrayList, _
              ByRef aLink As System.Collections.ArrayList, _
              ByRef aTarget As System.Collections.ArrayList) _
              Handles i3htree.OnAddItems

与上一个方法一样，当用户展开子树时，将调用此方法。

对于每个项目，被调用的应用程序可以指定键、标题、图像（如果它与树属性中指定的默认图像不同）、链接地址和链接目标。

I3HTreeCtrl 示例应用程序

示例应用程序是我主要用于测试的应用程序。它展示了 I3HTreeCtrl 的一些功能。

I3HTreeCtrl Demo1 应用程序

Demo1 应用程序演示了如何将 I3HTreeCtrl 控件用于简单的论坛应用程序。

主题和消息主题被视为文件夹，而消息文本是项目。

I3HTreeCtrl 控件的设置如下

i3htree.I3HTreeOrderStyle = _
               enumTreeOrderStyle.eTreeItemsFolders

i3htree.I3HTreeSelectStyle = _
               enumTreeSelectStyle.eTreeSelectCollaspeExpand

使用 eTreeItemFolders 样式，项目（即消息文本）显示在文件夹（即消息回复）之前。

eTreeSelectCollapseExpand 使树在用户单击文件夹图标或单击文件夹名称时展开和折叠。

应用程序将数据存储在名为 I3TreeDemo1.mdb 的 MS Access 数据库中。

Private Sub i3htree_OnAddFolders(ByVal sParentKey As String, _
              ByRef aKey As System.Collections.ArrayList, _
              ByRef aCaption As System.Collections.ArrayList) _
              Handles i3htree.OnAddFolders

// Open the database connection
Dim cnt As New OleDb.OleDbConnection
cnt.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" + _
                       System.Web.HttpRuntime.AppDomainAppPath + _
                       "I3HTreeDemo1.mdb"
 
cnt.Open()

Dim ds As Data.DataSet = New Data.DataSet
Dim adp As OleDb.OleDbDataAdapter = New OleDb.OleDbDataAdapter
 
If sParentKey = "ROOT" Then
   ' the parent is the ROOT
   ' under the root there are only folders that correspond
   ' to the topics list
ElseIf sParentKey.Chars(0) = "T" Then
   ' the parent is a topic
   ' under each topic there are messages that are folders
ElseIf sParentKey.Chars(0) = "M" Then
   ' the parent is a message
   ' under a message there are the message replies that
   ' that are represent by folders with the subject as folder name
End If
 
Cnt.Close()
  
End Sub

I3HTreeCtrl Demo2 应用程序

Demo2 应用程序演示了如何将 I3HTreeCtrl 控件用于具有多个产品选择的简单购物车应用程序。此处演示了复选框样式树。

应用程序将数据存储在名为 I3TreeDemo2.mdb 的 MS Access 数据库中。

产品类别是文件夹，而产品是叶子。树使用 eTreeCheckBox 样式，因此除了每个项目之外，还存在复选框。

单击 Order 按钮会导致所有选定的产品移动到列表框中。选定产品的列表是使用 GetCheckedItemList 方法获取的；复制选定的产品后，使用 ClearCheckedItemList 方法清除树选择。

Dim aOrder As Collections.ArrayList
i3htree.GetCheckedItemList(aOrder)
lstProducts.Items.Clear()
 
Dim i As Int32
For i = 0 To aOrder.Count - 1
   Dim itm As I3HTreeCtrl.CI3Item
   itm = i3htree.GetTreeObject().FindNode(aOrder(i))
   lstProducts.Items.Add(itm.GetCaption())
Next
 
i3htree.ClearCheckedItemList()

上述代码行演示了如何从键获取节点信息。这需要分两步完成：首先使用 I3HTreeCtrl 的 GetTreeObject 方法获取 CI3Tree 对象实例，然后使用 FindNode 方法获取 CI3Node 实例。