构建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）第一步需要引用其样式单文件
<link href='<c:url value="/systemManage/cssStyle/xtree.css" />' rel="stylesheet" type="text/css">
（2）第二步再引用 xtree.js 文件
<script language="javascript" type="text/javascript"
src='<c:url value="/systemManage/contentPage/xtree.js" />' >
</script>
（3）第三步编程WebFXTreeItem以产生出菜单
var treeRoot = new WebFXTree('蓝梦BBS论坛后台管理菜单');
var tree_userInfoManaeFolder = new WebFXTreeItem("用户信息管理")
var forwardQueryUserInfoItem=new WebFXTreeItem("查询一般用户信息");
forwardQueryUserInfoItem.action='<c:url
value="/adminForwordAction!forwardQueryRegisterUserInfo.action" />';
forwardQueryUserInfoItem.target="mainFrame";
tree_userInfoManaeFolder.add(forwardQueryUserInfoItem);
var forwardQueryVIPUserInfoItem=new WebFXTreeItem("查询VIP用户信息");
forwardQueryVIPUserInfoItem.action='<c:url
value="/adminForwordAction!forwardQueryVIPUserInfo.action" />';
forwardQueryVIPUserInfoItem.target="mainFrame";
tree_userInfoManaeFolder.add(forwardQueryVIPUserInfoItem);
var forwardShowRegisterUserInfoItem=new WebFXTreeItem("显示用户信息"); forwardShowRegisterUserInfoItem.action='<c:url
value="/adminForwordAction!forwardShowRegisterUserInfo.action" />';
forwardShowRegisterUserInfoItem.target="mainFrame";
tree_userInfoManaeFolder.add(forwardShowRegisterUserInfoItem);
var forwardDeleteRegisterUserInfoItem=new WebFXTreeItem("删除用户信息"); forwardDeleteRegisterUserInfoItem.action='<c:url
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菜单
●第一步需要引用其样式单文件
<link href='<c:url value="/systemManage/cssStyle/xtree.css" />'
rel="stylesheet" type="text/css">
●第二步再引用 xtree.js 、xloadtree.js和xmlextras.js文件
<script language="javascript" type="text/javascript"
src='<c:url value="/systemManage/contentPage/xloadtree.js"
/>' >
</script>
<script language="javascript" type="text/javascript"
src='<c:url value="/systemManage/contentPage/xmlextras.js"
/>' >
</script>
●第三步编程WebFXLoadTree以产生出菜单
var menuTree = new WebFXLoadTree("蓝梦BBS论坛后台管理菜单","leftMenu.xml");
document.write(menuTree);
（4）执行后将产生出下面的效果
5、由Servlet动态产生出XML文件内容（可以产生动态树）
（1）设计一个产生出XML文件内容的Servlet
（2）添加一个JDomXMLMenuBean
（3）在页面中向Servlet进行请求
var menuTree = new WebFXLoadTree("蓝梦BBS论坛后台管理菜单",
'<c:url value="/leftmenuservlet" />');
document.write(menuTree); （4）执行后的结果为。