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

1、引言

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

2、树形菜单

     既然是树，就应该有树根、树干、树叶。树形菜单展现出来的效果实际上是一棵倒地的树：最左边是根，根靠右是干，干上长出很多叶子，也有很多干。在数据结构上将根、干和叶抽象成统一的术语叫节点，这样显得专业点。 但我们可以将节点分为三类：根节点、父节点、子节点，分别对应到树根、树干和树叶。一颗树只有一个根，所以对应的一个树形菜单只有一个根节点。一个根节点可以包含多个父节点和子节点。一个父节点包含一个或多个子节点。节点的层级可以无限扩展。任何一个节点，都可以对应到一个具体的功能url，也可以不对应，从这个意义上可以将节点的类型分为叶结点和非叶节点。有对应的功能url时就是叶节点，否则就是非叶节点。树形导航菜单的层次不受限制，可以多于两层。每个节点有4个属性。

 

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

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

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

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

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

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

3.1  XML规范

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

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

 

非叶节点

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

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

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

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

-->

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

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

-->

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

3.2 示例 

< treeRoot > 

 

  

 

 

    

    

    

    

 

 

结果如图：

 

4、数据库表结构

未完待续