ASP Treebuilder

dswigger

4.91/5 (11投票s)

2003年5月8日

6分钟阅读

100413

1770

允许开发人员轻松创建动态 JavaScript 树形控件。

下载源代码和示例文件 - 23.6 Kb

Sample Image - ASPTreebuilder.jpg

引言

最近我需要用 ASP 实现几种不同类型的树形控件。我到处看了看，但没找到完全符合我要求的。DHTML 的树形控件并不稀缺，我的问题是大多数控件都非常复杂，而且功能远超我的需求。另一个问题（我遇到的）是，一些更简单的控件，即使是半简单的树形，也需要在 ASP 端编写大量代码。

我决定想要一个可以通过一个服务器端包含文件生成，无需组件，并且速度相当快的树形控件。所以这是我第一个版本的 ASP 可用树形控件。

我需要说明的是，最初我使用的是我在某处找到的一个示例（老实说我记不清是在哪里了），那个示例只留下了用于显示树的图片，以及几个 `div` 名称。

背景

所有 DHTML 中使用的树形控件都依赖于 JavaScript 来操作页面上的元素。所以（举个例子）如果你有一个 `DIV` 元素，并给它一个 ID，比如

<DIV id=myDIV style="DISPLAY: none"></DIV>

然后你就可以在客户端 JavaScript 中像这样操作 HTML 元素了

<script language="javascript">
var oMyDiv = document.getElementById("myDIV");
// do something with it

oMyDiv.style.display= "none";
</script>

这是一个非常简单的例子，但它精确地演示了树形和其他 DHTML 小部件是如何工作的。你可以在脚本中操作元素的所有属性等等。

在我的树形控件中，我使用 `DIV` 来封装树的不同部分（每个分支），然后当你点击展开一个分支时，我会根据是否要展开（显示子 `DIV`）或折叠（隐藏子 `DIV`）来改变 `DIV` 的样式。你可以查看源代码，了解所有元素是如何被操作来创建树形控件的——它实际上完全基于显示/隐藏和改变一些属性。

在我看来，从 ASP 中生成树形控件的关键在于树的构建（ASP 端）。这部分是外面的一些 ASP 示例真的很令人困惑的地方。我很难相信渲染一棵树需要 3 页的代码。我并不是说我的解决方案是最好的，但它所需的代码相当短（我为此感到自豪）。

我们可以不了解树中将包含什么内容，就对树做出一些假设。

所有树都有分支和叶子
一棵树（绘制时）是逐行绘制的

第一点使得创建小的树 API 变得非常简单——你不是在添加叶子，就是在开始一个新的分支。

第二点是我们可以在代码中做一些优化，并去除通常绘制树所需的大部分逻辑。我没有使用树结构来绘制树，而是只跟踪你处于哪个深度的分支（这稍后会变得清晰）。

其他一些细节是，我希望能够为每个分支和项目添加键，我希望能够进行选择、多选和取消选择。我还想避免编写大量 JavaScript 数组来跟踪项目。

选择/取消选择/键的解决方案是使用一个隐藏的 `SPAN` 元素，其中包含每个项目的键（你可以给它赋予任何值）及其选择状态。你可能想知道我在哪里存储了选择状态。我利用了这些包含项目键的 `SPAN` 永远不会可见的事实——所以我可以把变量放到元素的 `style` 属性中，而不会对实际页面显示产生任何影响。我把 0 或 1 放入 `zIndex` 属性来告诉脚本项目是否被选中（感谢 CSS！）。

最后但同样重要的是，我添加了一个自定义的 JavaScript 处理程序来处理项目选择。JavaScript 类的原型如下（我们稍后会看到如何使用它）

myCustomFunction(bReslect,bSelected,sKey);

`bReselect` 是否刚刚重新选择了该项
`bSelected` 是否选择了该项
`sKey` 是该项的键（你分配的）

使用代码

让我们言归正传，看看所有这些信息如何组合成一个（希望）有用的东西。

要使用这些脚本创建树，你需要在 ASP 页面的 `<HEAD>` 标签之间包含它。

<!--#INCLUDE FILE="include\i_treebuilder.asp" -->

紧接着这一行是放置你的自定义 JavaScript 函数的好地方

// define our item dispatch function 

myTreeItemDispatch(bReslect,bSelected,sKey)
{
   if(bSelected || bReslect)
   {
      alert("You clicked - " + sKey);
   }
}
// let tree lib know we want to use this

TreeItemDispatch = myTreeItemDispatch;

我们几乎准备好输出一棵树了。我为我的树实现添加的一个功能是能够自定义每个节点的图标。为了使其高效工作，你在开始生成树之前，需要使用数字注册它们。这是一个例子（在 ASP 中）

' register our branch and leaf type 


tree_RegisterBranchType 0,"images/tree/foldericon.gif" 

tree_RegisterLeafType 0,"images/tree/htmlicon.gif"

我为每种类型设置了 10 种可能性（可能有点过头了）。如果你想添加更多，只需更改数字。

我们现在可以开始生成树了，在我的实现中，树的顶部是静态的（即：它不能被折叠）。我之所以这样做，是因为我需要制作的每棵树只需要顶部作为树内容的描述。所以要启动一棵树，我们会有一些 ASP 代码，如下所示

tree_Start "Personal Folders","images/tree/openfoldericon.gif"

这告诉树 API 开始构建一棵树，其顶部项目名为“Personal folders”并使用指定的图标。

现在我们可以自由地为树添加分支和叶子了——我们真正需要跟踪的是，我们是否正在添加分支或树本身的最后一个项目——另一个需要注意的是，我为 ASP 定义了一个常量（用于 ASP 使用），名为 `tTRUE` 和 `tFALSE`，所以在添加分支和叶子时，我们使用常量来表示是/否值。要添加一个分支，我们使用 `tree_StartBranch` 函数。它接受几个参数——这是一个例子

tree_StartBranch 0,tFALSE,"Test Folder","tst"

第一个参数是分支类型（我们在上面注册的），第二个参数告诉树这是当前分支（或树）中的最后一个分支，第三个是标题，最后一个参数是你可以在客户端分配的用于实现自定义行为的键。

一旦我们开始一个分支，我们就可以像这样为它添加叶子

tree_AddLeaf 0,tFALSE, "Child 1","tst1"

参数与 `tree_StartBranch` 的参数相同，只是第一个参数是叶子类型（我们在上面注册的）。

一旦你为分支添加了叶子，就必须使用 `tree_EndBranch` 函数来结束它。

当你添加了所有分支后，调用 `tree_End` 函数来输出树。

API 的使用让你只需几个函数就可以轻松地构建一棵树。查看包含的示例，你会发现它相当简单。

闭运算

当有人点击一个项目时会发生什么，由你来实现。我希望这是一个很好的树生成框架——我希望你觉得它有用。

如果你在有意思的东西中使用了它，请告诉我。