外观漂亮的 HTML 树，使用 XML&XSLT

• 下载 xtree - 37.26 KB

引言

有很多基于 Web 的树形控件，例如由圣彼得堡（俄罗斯）发布的 dthmlxtree，由 WebFX 发布的 xtree 以及 MSDN 中使用的 Microsoft DeepTree。这些控件使基于 Web 的应用程序像 C/S 应用程序一样方便。但这些控件存在一些限制，例如编码复杂、难以修改等。本文将介绍如何使用 xml & xslt 逐步构建一个基于 Web 的树形控件，以及关键功能的工作原理。

特点

1. 基于 Web 的使用 xml & xslt。
2. 轻量级，所有代码小于 13k（不包括图像）。
3. XP 资源管理器风格的操作，支持键盘导航。
4. 支持 IE、Firefox，未在 Opera 和其他浏览器上测试。
5. 简单的数据文件，可以方便地从数据库生成。

要实现的功能

1. 原地编辑节点标题。
2. 拖放或剪切粘贴（在同一个树内，在树之间）。
3. 大型树的动态加载。
4. 复选框。

使用代码

构建如下结构的 xml 数据文件

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="xtree.xsl" ?>
<nodes>
       <node> 
              <code>node1_code</code>
              <parent_code>node0</parent_code>
              <name>node1_name</name>
       </node>
       <node>
              <code>node2_code</code>
              <parent_code>node0</parent_code>
              <name>node2_name</name>
       </node>
       … 
       … 
</nodes>  

在此 xml 文件中，href="xtree.xsl" 指令引导 xml 处理器使用 xtree.xsl 格式化 xml。请注意需要“imgs”目录。

实现细节

在 xtree.xsl 中，有 4 个部分：主 html 模板、树节点模板、css 和 javascript。核心是由 XSL 编写的树节点模板。该模板是一个递归调用过程，就像这样

procedure formatTreeNode(xmlTreeNode) {
    foreach(childNode in xmlTreeNode.childNodes) {
        buildNodeHTML(childNode);
        //recursive call
        formatTreeNode(childNode);
}
}

实际的 xslt 代码如下所示

<xsl:template name="tree">
<xsl:param name="tree-node" />
<xsl:for-each select="$tree-node">
<div class="tree-node">
<div class="node-content">
<!-- node content format -->
...
</div>
</div>
<xsl:if test="$children>0">
<!--recursive call -->
...
</xsl:if>
</xsl:for-each>

buildNodeHTML 生成如下 html 代码（叶节点，没有子节点）

<div class="tree-node"> 
<div class="node-content"> 
<img class="img-line" onclick="onClick(this)" src="imgs/T.gif"> 
<img class="img-icon" onclick="onClick(this)" src="imgs/leaf4.gif"> 
<span onmouseover="onMouseOver(this)" onmouseout="onMouseOut(this)" onmousedown="onMouseDown(this);" onclick="onTextClick(this)"> node1</span> 
</div> 
</div> 

上述 HTML 显示一个节点状态标记（加号或减号）、一个节点图标和节点标题，并连接事件处理器。这是一个单个节点原型。如果此节点有子节点，则插入如下代码

<div class="sub-container"> 
<div class="sub-padding"> 
        <div class="tree-node">…</div> 
</div> 
</div>

<div class=" tree-node "> 是一个大区域，用于容纳节点自身的内容及其所有子节点，<div class=" sub-container"> 是一个较小的区域，用于容纳所有子节点，<div class=" sub- padding "> 是另一个较小的区域，用于容纳与其父节点缩进的所有子节点。

历史

发布于 2009/7/28。