构建BBS论坛系统项目中后台管理页面中的树形菜单的应用示例

1.1构建BBS论坛系统项目中后台管理页面中的树形菜单的应用示例1.1.1应用XTree树型控件在页面中实现树形菜单

1、应用XTree树型控件

（1）XTree树型控件

xtree.js是Web开发中运用较多的一个树型控件。其入门简单，功能强大，很多人在它的基础上开发出了自己的树型控件。

XloadTree也是/公司的基于JavaScript的建立树型目录的开源产品，扩展性强，使用简单。由于XloadTree是基于XmlHttp请求/响应模型，必须使用http协议访问代码才可以正确加载XML文件。

（2）下载XTree树型控件（编程方式的系统包）

/

/download/xtree117.zip

（3）下载XTree树型控件（XML文件方式的系统包、而且该XML文件可以是动态创建）/dhtml/xloadtree/xloadtree.html

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='

value="/adminForwordAction!forwardQueryRegisterUserInfo.action" />';

forwardQueryUserInfoItem.target="mainFrame";

tree_userInfoManaeFolder.add(forwardQueryUserInfoItem);

var forwardQueryVIPUserInfoItem=new WebFXTreeItem("查询VIP用户信息");

forwardQueryVIPUserInfoItem.action='

value="/adminForwordAction!forwardQueryVIPUserInfo.action" />';

forwardQueryVIPUserInfoItem.target="mainFrame";

tree_userInfoManaeFolder.add(forwardQueryVIPUserInfoItem);

var forwardShowRegisterUserInfoItem=new WebFXTreeItem("显示用户信息"); forwardShowRegisterUserInfoItem.action='

value="/adminForwordAction!forwardShowRegisterUserInfo.action" />';

forwardShowRegisterUserInfoItem.target="mainFrame";

tree_userInfoManaeFolder.add(forwardShowRegisterUserInfoItem);

var forwardDeleteRegisterUserInfoItem=new WebFXTreeItem("删除用户信息"); forwardDeleteRegisterUserInfoItem.action='

value="/adminForwordAction!forwardDeleteRegisterUserInfo.action" />';

forwardDeleteRegisterUserInfoItem.target="mainFrame";

tree_userInfoManaeFolder.add(forwardDeleteRegisterUserInfoItem);

treeRoot.add(tree_userInfoManaeFolder);

document.write(treeRoot);

（4）执行后将产生出下面的效果

4、运用XML数据源但XML文件的内容是静态的（可配置的形式）

（1）添加tree.dtd文件

设计其内容

（2）设计XML数据源文件

设计其内容

（3）编程该xLoadtree菜单

●第一步需要引用其样式单文件

rel="stylesheet" type="text/css">

●第二步再引用 xtree.js 、xloadtree.js和xmlextras.js文件

●第三步编程WebFXLoadTree以产生出菜单

var menuTree = new WebFXLoadTree("蓝梦BBS论坛后台管理菜单","leftMenu.xml");

document.write(menuTree);

（4）执行后将产生出下面的效果