树形菜单的数据结构实现方式

1、引言
树形菜单是WEB应用常见的一种功能导航展现方式，不管树形菜单用什么样的技术去实现，无论如何是跳不出以下两步的：第一、读取菜单数据；第二、展现菜单。实现菜单的展现有很多方式，比如 js, HTML5, ajax等，但不管什么样的前端实现技术，树形菜单的数据结构却有多种实现方式，常见的有：数据库表结构、jason、xml文件。本文拟对树形菜单的各种常用数据结构做个总结。
2、树形菜单

既然是树，就应该有树根、树干、树叶。树形菜单展现出来的效果实际上是一棵倒地的树：最左边是根，根靠右是干，干上长出很多叶子，也有很多干。在数据结构上将根、干和叶抽象成统一的术语叫节点，这样显得专业点。

但我们可以将节点分为三类：根节点、父节点、子节点，分别对应到树根、树干和树叶。一颗树只有一个根，所以对应的一个树形菜单只有一个根节点。一个根节点可以包含多个父节点和子节点。一个父节点包含一个或多个子节点。节点的层级可以无限扩展。任何一个节点，都可以对应到一个具体的功能url，也可以不对应，从这个意义上可以将节点的类型分为叶结点和非叶节点。有对应的功能url时就是叶节点，否则就是非叶节点。树形导航菜单的层次不受限制，可以多于两层。每个节点有4个属性。



[align=left] [/align]

（1）. title ：其值表示节点在导航菜单上的显示文字；

（2）. url ：其值用于表示要导航到的功能页面的 URL；

（3）. icon ：其值表示节点文字前要显示的图标文件的位置；图标的尺寸为18×18（px）

（4）. target ：target,其值表示打开功能页面的框架名（一般设置为功能内容区所在的框架）；

所有属性都是必须的属性，但其值可置为空字串。因为非叶节点只是起节点容器的作用，所以非叶节点的url，target 属性设为空字串，而对叶节点必须设置这两个属性为有效值，从而实现在指定的框架中载入相应功能页面的导航功能。

3、树形菜单的XML格式的数据结构

3.1 XML规范

<?xml version="1.0"encoding="utf-8"?>

<!—菜单树标签,
在一个xml菜单文件中可以有多个菜单树，但只能有一个菜单树标签-->

<treeMenu>

<!—根节点：一个根节点就是一棵菜单树，一棵菜单树只能有一个根节点-->

<treeRoot title="节点显示文字" url="url地址" target="框架名" icon="图标文件路径">

<!—

非叶节点

title ：其值表示节点在导航菜单上的显示文字；(非空)

url ：其值用于表示要导航到的功能页面的 URL；(可空)

icon ：其值表示节点文字前要显示的图标文件的位置；(非空)

target ：target,其值表示打开功能页面的框架名(可空)

-->

< treeNode title="节点显示文字"url="url地址" target="框架名" icon="图标文件路径">

<!—

叶节点，单表签的为叶节点，其4个节点都不可为空

-->

< treeNode title="节点显示文字"url=" url地址" icon="图标文件路径" target="框架名"/>

</ treeNode >

</ treeRoot>

</treeMenu>

3.2 示例

<?xml version="1.0"encoding="utf-8"?>

< treeRoot >

<treeNode title="工作管理"url=" fabao.cn " target="footer" icon="工作进度.gif">

<treeNode title="设定"url="xxx.cn" target="" icon="w1.gif">

<treeNode title=" 添 加 工 作1 "url="xxx.m" icon="w2.gif" target="main"/>

<treeNode title=" 添 加 工 作2 "url="xxx.m" icon="w2.gif" target="main"/>

<treeNode title=" 添 加 工 作3 "url="xxx.m" icon="w2.gif" target="main"/>

<treeNode title=" 添 加 工 作4 "url="xxx.m" icon="w2.gif" target="main"/>

</ treeNode>

<treeNode title="工作进度" url=""target="" icon="j3.gif"">

<treeNode title="查看1"url="viewwork.m" target="main" icon="j4.jpg"/>

<treeNode title="查看2"url="viewwork.m" target="main" icon="j4.jpg"/>

<treeNode title="查看3"url="viewwork.m" target="main" icon="j4.jpg"/>

<treeNode title="查看4"url="viewwork.m" target="main" icon="j4.jpg"/>

</ treeNode>

</ treeNode>

</ treeRoot >

结果如图：




[align=left] [/align]

4、数据库表结构
未完待续