三行代码实现树形菜单（xmlTree标签实例）

最新推荐文章于 2021-09-05 18:19:44 发布

原创最新推荐文章于 2021-09-05 18:19:44 发布 · 1.2w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#xmlTree标签 #Web开发 #互联网 #树形菜单 #电子商务

java 同时被 3 个专栏收录

129 篇文章

订阅专栏

Web开发

124 篇文章

订阅专栏

轻开平台 Easy do it（原WebEasy平台）

117 篇文章

订阅专栏

本文介绍了一种利用XML文件和JavaScript脚本来动态生成树形菜单的方法。通过引入特定的JavaScript文件并设置必要的参数，可以方便地展示出树形结构的数据。文章提供了完整的HTML示例代码，展示了如何实现这一功能。

引入树操作JavaScript脚本文件

<chinahtml file="help/tree/act.htm"/><!-- 引入树操作文件 -->

图片路径及节点编号首字符

<bag id=pPage><we name=imgPath>help/tree</we><we name=id>e</we></bag>

引入xml文件并显示树形菜单

<xmlTree id="@{pPage:id}" url="javascript:alert" imgPath="@{pPage:imgPath}" p="HtokID">_samples/test.xml</xmlTree>

效果

完整代码

<html>
<head>
<title>XML树</title>
<chinahtml file="help/tree/act.htm"/><!-- 引入树操作文件 -->
<style>div{padding-left:0px;padding-top:0px;cursor:normal;font-size:12px}</style>
</head>
<body onload="onStart();">
<table border=0 style="overflow:scroll" cellspacing=0 cellpadding=0>
<tr><td height=8></td></tr>
<tr><td>
<chtml>
<bag id=pPage><we name=imgPath>help/tree</we><we name=id>e</we></bag>
<xmlTree id="e" url="javascript:alert" imgPath="@{pPage:imgPath}" p="HtokID">_samples/test.xml</xmlTree>
</chtml>
</td></tr></table>
</body>
</html>

（例子文件：_samples/tree.html）在 轻开平台 的 _samples 目录下
酷吧！