1.首先导入js文件
<script language="JavaScript" src="js/MzTreeView10.js"></script>
2.action中查询出树的相关内容
需要在action中在数据库中查询出当前节点的名称和id,以及父节点的id,拼凑成下面的格式传给jsp。
3.jsp页面进行显示
jsp中只需要在body中写一个js块
<body>
<script language="JavaScript">
var tree = new MzTreeView("tree"); //定义一个树(注意,这里的参数tree和后面的tree.nodes必须相同,否则显示不出)
tree.setIconPath("/images/"); //定义树的图片的目录
tree.nodes['-1_1'] = "text:检验信息管理; ";
tree.nodes['1_2'] = "text:外购产品检验组; ";
tree.nodes['1_3'] = "text:最终产品检验; ";
tree.nodes['1_4'] = "text:复检情况; ";
tree.nodes['1_5'] = "text:办公辅助; ";
tree.nodes['1_6'] = "text:基础信息管理; ";
tree.nodes['1_7'] = "text:部门意见与建议; ";
tree.nodes['1_8'] = "text:系统意见与建议; ";
tree.nodes['2_11'] = "text:子文件夹测试一; ";
tree.nodes['2_12'] = "text:子文件夹测试二; ";
<!--示例如上,给树添加内容,-1为根节点,_后面的是子节点,依次显示-->
document.write(tree.toString());
<script>
</body>
4.查看了网上一些文章
发现tree.nodes['-1_1'] = "text:检验信息管理; "; 这个地方还可以定义很多内容
比如url,例如tree.nodes['-1_1'] = "text:检验信息管理; url:/action.do"; 这样点击这个节点的时候会进行跳转到action.do
比如method,例如tree.nodes['-1_1'] = "text:检验信息管理; method:check()";这样点击这个节点的时候会触发check()方法。
5.顺便提一下也可以在MzTreeView10.js这个js文件中实现各种方法。