用了一下午的时间，写了一个基于jQuery框架的，仅由16行核心代码所构建的无限级联动菜单。用户（使用本文件的程序员）可自由创建：二级联动、三级联动、四级联动...
点击这里查看功能演示，点击这里下载算法源文件。
下面简单介绍一下实现此功能所需的数据结构与算法思想。
无限级联动中的“无限”一词，关联到程序上来的话，实现方法无非就两种：循环和递归。有朋友会有费解，不知何时应该选择前者或后者。因为即便有时两者都可以写出结果，但在内存消耗与执行效率上，往往只有一种方法为上策。在这里，我仅概括一下在处理常见的穷举问题时的策略，以供参考。
循环一般用来处理“长度一目了然”的情况，这是对于计算机来说的。比如：数组的长度、对象的遍历等等。当我们看到“[...]”这样的数组时，第一反应就是去循环，因为对于计算机来说，这个数组的长度一目了然，可以直接遍历出里面的所有单项值。
还有种结构，是在上面结构的基础上复杂化了一点，形成了“[[...]]”。这是一个二维数组，对于计算机来说，无法用一次循环来看清数组内所有的值，但我们可以使用两层嵌套循环来解决。那再试想，如果现在的结构是“[[[[n个[]]]]]”，且n未知呢？我相信再怎么循环都解决不了这类问题了。生活中有很多这样嵌套的数据结构，比如操作系统的文件夹管理策略就允许这样的嵌套，而且理论上可以无限制的嵌套。对于这类问题，只能使用递归。
言归正传，对于联动菜单来说，每一级的数据都是独立存在的，且同级之间不可以相互影响。我们无法用一个大的一维数组表示出这种独立性，而嵌套的数组结构恰好解决了这个问题。因此，我们用递归来处理它。
网上也有类似功能的程序，但是普遍的都比较复杂。更有甚者，还使用了组合模式那么昂贵的办法来解决。我的这个算法核心只有16行，也就是一个show方法。下面从数据结构开始介绍一下。
刚分析了应该采用的数据结构，自然，一个类也差不多建立起来了。要生成<option>标签，有两个值是应该提供的：<option value="x">y</option>。因此，我们使用Cascade类来表示。Cascade类中的list属性就反应了这种目录式的嵌套关系。在list里，嵌套几层new Cascade对象，就是几层级联动的表示。
软件都使用MVC，讲究图形界面与底层业务逻辑相分离。同样，当我们创建完了底层的数据结构以后，下一步再去考虑用这些逻辑来反应出界面中option标签的变化情况，这就是Container类的职责。我们用tag数组表示每一级所对应的select标签的引用，optionsLen表示每一级默认的option元素（用户本来就有的option，我们不去动），最后使用了show方法，递归的为每一级select标签绑定了onchange事件。这个方法做了这些事：显示与本级同一层结构的内容；将本级后面的所有select置为初始值；如果还有下一级内容，递归一次。
我们将上面的逻辑封装成了Clustering.js，各位可自行下载并引入到项目当中，根据Cascade对象嵌套的数量，程序会自动创建出用户所希望的n级联动的效果。
点击这里查看功能演示，点击这里下载算法源文件。
下面简单介绍一下实现此功能所需的数据结构与算法思想。
无限级联动中的“无限”一词，关联到程序上来的话，实现方法无非就两种：循环和递归。有朋友会有费解，不知何时应该选择前者或后者。因为即便有时两者都可以写出结果，但在内存消耗与执行效率上，往往只有一种方法为上策。在这里，我仅概括一下在处理常见的穷举问题时的策略，以供参考。
循环一般用来处理“长度一目了然”的情况，这是对于计算机来说的。比如：数组的长度、对象的遍历等等。当我们看到“[...]”这样的数组时，第一反应就是去循环，因为对于计算机来说，这个数组的长度一目了然，可以直接遍历出里面的所有单项值。
还有种结构，是在上面结构的基础上复杂化了一点，形成了“[[...]]”。这是一个二维数组，对于计算机来说，无法用一次循环来看清数组内所有的值，但我们可以使用两层嵌套循环来解决。那再试想，如果现在的结构是“[[[[n个[]]]]]”，且n未知呢？我相信再怎么循环都解决不了这类问题了。生活中有很多这样嵌套的数据结构，比如操作系统的文件夹管理策略就允许这样的嵌套，而且理论上可以无限制的嵌套。对于这类问题，只能使用递归。
言归正传，对于联动菜单来说，每一级的数据都是独立存在的，且同级之间不可以相互影响。我们无法用一个大的一维数组表示出这种独立性，而嵌套的数组结构恰好解决了这个问题。因此，我们用递归来处理它。
网上也有类似功能的程序，但是普遍的都比较复杂。更有甚者，还使用了组合模式那么昂贵的办法来解决。我的这个算法核心只有16行，也就是一个show方法。下面从数据结构开始介绍一下。
刚分析了应该采用的数据结构，自然，一个类也差不多建立起来了。要生成<option>标签，有两个值是应该提供的：<option value="x">y</option>。因此，我们使用Cascade类来表示。Cascade类中的list属性就反应了这种目录式的嵌套关系。在list里，嵌套几层new Cascade对象，就是几层级联动的表示。
软件都使用MVC，讲究图形界面与底层业务逻辑相分离。同样，当我们创建完了底层的数据结构以后，下一步再去考虑用这些逻辑来反应出界面中option标签的变化情况，这就是Container类的职责。我们用tag数组表示每一级所对应的select标签的引用，optionsLen表示每一级默认的option元素（用户本来就有的option，我们不去动），最后使用了show方法，递归的为每一级select标签绑定了onchange事件。这个方法做了这些事：显示与本级同一层结构的内容；将本级后面的所有select置为初始值；如果还有下一级内容，递归一次。
我们将上面的逻辑封装成了Clustering.js，各位可自行下载并引入到项目当中，根据Cascade对象嵌套的数量，程序会自动创建出用户所希望的n级联动的效果。
本文链接： http://wushen.biz/original/programs/index.jsp?id=1310223733000¤t=1 （复制）
阅读次数 ( 8797 )
下载次数 ( 62 )
1 #：
ailis
2012-04-19 18:19:32
谢谢 刚好我可能会用到
谢谢 刚好我可能会用到
2 #：
马进云
2012-04-01 10:54:03
很好很好非常好！
很好很好非常好！
3 #：
system_mush
2012-03-26 14:35:17
好，真好！
好，真好！
作者 & 技术支持： 毕飞 主题设计： mono-lab
版权所有 ICP备案号： 苏ICP备09065350号 在线 38 人
Author & Powered By： Bi Fei Theme Designed： mono-lab
Copyright © http://www.wushen.biz
Author & Powered By： Bi Fei Theme Designed： mono-lab
Copyright © http://www.wushen.biz