第17章__级联菜单.pptVIP

第17章 级联菜单 在上两章中使用用户自定义控件实现了Ajax功能，在本章中将介绍在页面中直接使用JavaScript脚本实现级联菜单。 17.1 需求分析和概要设计 级联菜单是指在网站中多个下拉列表由于互相的隶属关系，当父级下拉列表选中项改变时，动态改变子级下拉列表的内容，从而保证客户可以迅速获取相应父级下拉列表中所包含的子级下拉列表的内容。如在购物网站中，经常需要用户输入送货地址，当用户选择相应省区时，应动态改变地吕斜淼哪谌荩奖憧突а≡竦厍 级联菜单在很多商务网站中都得到了广泛应用，级联菜单可以很好的控制用户输入，保证用户输入信息的正确。在本章的示例中，将展示一个国内省区、地区的级联更新菜单。实际上，级联菜单的需求基本都是一致的。 17.1.1 需求分析 对于国内省区、地区这样的二级级联菜单，需要实现以下功能： 主菜单选择改变，二级菜单发生改变。 主菜单选择改变，动态加载所有二级菜单子项。 实际上，所有级联菜单的需求都是一致的，即保证当主菜单改变时，改变二级菜单，并动态加载所有二级菜单的菜单项。 17.1.2 数据库设计 本示例数据库设计非常简单，只有一张表即Area表。Area表结构如表所示： 通过表结构可以看到，实际上Area表实现了自引用，表中的所有数据行都引用表中的字段作为外键。 17.2 实现代码 级联菜单实现代码比较简单，仅仅是当主菜单改变时，请求服务器获取二级菜单项，并加载至二级菜单中。 17.2.1 功能页面 在本示例中，仅仅具有一个功能页面，代码如下所示： (详细内容请参照本书) 在以上的Ajax功能脚本中，请求的是一个页面，在changeCity()函数中对服务器端返回的XmlDom对象进行了解析，加载至子菜单中。 17.2.2 服务器端代码 服务器端代码也较为简单，仅仅实现了根据省区ID，查询地区并使用DataSet将XmlDom写入响应流中。 说明：在服务器端页面中获取省区ID，然后从数据库中查找所有ParentID为省区ID的项，实际上就获取了所有地区项，然后使用DataSet对象的WriteXml方法将所有地区项转换为XML数据并写入响应流中，前台JavaScript脚本通过解析XmlDom对象就可以完整的获取地区项。 由于Area表使用了自引用，所以可以很容易扩展为无限级联菜单，通过类似设计可以让级联菜单具有无限的扩展性，因为所有子项的ParentID都等于父项ID，那么通过父项ID可以很容易的获取相应子项。 17.3 小结 在本章中展示了一个简单的级联菜单，并介绍了一种扩展性极强的级联菜单实现方式。在本章中，介绍了级联菜单实现的数据库设计，通过类似设计可以让级联菜单具有无限的扩展性，因为所有子项的ParentID都等于父项ID，那么通过父项ID可以很容易的获取相应子项。 请仔细阅读本章代码，并可以直接使用本章代码实现省份、地区级联菜单的无刷新联动，读者还可以扩展该示例，实现无限级联菜单。笔者在这里提醒所有读者，无限级联菜单仅仅需要对菜单添加一个事件处理函数即可以实现。 * Area表结构 省区或地区的父ID。 Int，外键，引用AreaID。 ParentID 省区或地区名称。 Nvachar，30。 Name 省区或地区ID。 Int，自增。 AreaID 说明 数据类型 列名