杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料
杨教授大学堂，版权所有，盗版必究。 1/8页 1.1 构建BBS论坛系统项目中后台管理页面中的树形菜单的应用示例 1.1.1 应用XTree树型控件在页面中实现树形菜单 1、应用XTree树型控件 （1）XTree树型控件 xtree.js是Web开发中运用较多的一个树型控件。其入门简单，功能强大，很多人在它的基础上开发出了自己的树型控件。 XloadTree也是http://webfx.eae.net/公司的基于JavaScript的建立树型目录的开源产品，扩展性强，使用简单。由于XloadTree是基于XmlHttp请求/响应模型，必须使用http协议访问代码才可以正确加载XML文件。 （2）下载XTree树型控件（编程方式的系统包） http://webfx.eae.net/ http://webfx.eae.net/download/xtree117.zip 杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料
杨教授大学堂，版权所有，盗版必究。 2/8页
（3）下载XTree树型控件（XML文件方式的系统包、而且该XML文件可以是动态创建） http://webfx.eae.net/dhtml/xloadtree/xloadtree.html 杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料
杨教授大学堂，版权所有，盗版必究。 3/8页 2、xtree有两种使用模式 其一为显示构造树，而其二为运用XML数据源，同时该XML数据源也可以动态在Servlet组件中创建。 3、显示构造树（可以参考systemManage/contentPage/leftMenu.jsp） （1）第一步需要引用其样式单文件 （2）第二步再引用 xtree.js 文件 （3）第三步编程WebFXTreeItem以产生出菜单 var treeRoot = new WebFXTree('蓝梦BBS论坛后台管理菜单'); var tree_userInfoManaeFolder = new WebFXTreeItem("用户信息管理") var forwardQueryUserInfoItem=new WebFXTreeItem("查询一般用户信息"); forwardQueryUserInfoItem.action=' 杨教授大学堂，版权所有，盗版必究。 4/8页 value="/adminForwordAction!forwardQueryVIPUserInfo.action" />'; forwardQueryVIPUserInfoItem.target="mainFrame"; tree_userInfoManaeFolder.add(forwardQueryVIPUserInfoItem); var forwardShowRegisterUserInfoItem=new WebFXTreeItem("显示用户信息"); forwardShowRegisterUserInfoItem.action=' 杨教授大学堂，版权所有，盗版必究。 5/8页 设计其内容 （2）设计XML数据源文件 设计其内容 杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料 杨教授大学堂，版权所有，盗版必究。 6/8页 （3）编程该xLoadtree菜单 第一步需要引用其样式单文件 第二步再引用 xtree.js 、xloadtree.js和xmlextras.js文件 第三步编程WebFXLoadTree以产生出菜单 var menuTree = new WebFXLoadTree("蓝梦BBS论坛后台管理菜单","leftMenu.xml"); document.write(menuTree); （4）执行后将产生出下面的效果 杨教授大学堂 精心创作的优秀程序员 职业提升必读系列资料 杨教授大学堂，版权所有，盗版必究。 7/8页 5、由Servlet动态产生出XML文件内容（可以产生动态树） （1）设计一个产生出XML文件内容的Servlet （2）添加一个JDomXMLMenuBean （3）在页面中向Servlet进行请求 var menuTree = new WebFXLoadTree("蓝梦BBS论坛后台管理菜单", ' 杨教授大学堂，版权所有，盗版必究。 8/8页 document.write(menuTree); （4）执行后的结果为