树形列表(菜单)在Web应用中十分常见,通常应用于目录式结构,例如产品分类、部门机构等。传统的树形菜单主要有两种加载方式:一种是一次性加载全部数据,另一种是根据用户操作逐步加载数据,但是需要刷新页面。前者加载速度较慢,并且存在大量数据没有被使用的浪费情形。后者可以逐步加载,但是频繁地刷新页面在给用户带来不便的同时,也增加了系统开发的复杂度。
当前使用的Ajax技术,同时兼顾了两种传统方式的优点,即无刷新和动态加载特性。从用户体验到服务器负担来讲都是有利的。
由于编写一个动态树形列表要考虑的问题很多,在进入正式的讲解之前,先以一个简单的页面展示一下树形列表的基本原理。了解了基本原理后,再深入研究树形列表的细节就容易多了。图1.6所示是基本原理演示页面的运行效果。
动态树形列表的基本原理是:每当单击一个子项时,动态地在子项节点内追加新的节点,同时依靠样式表设置新节点的缩进。由于新节点在父节点内追加,因此缩进效果也建立在父节点已有的缩进基础上。通过叠加的缩进使得整个列表具有了树形结构。图1.7所示是各函数之间的调用关系。
图1.6