使用MzTreeView构造异步树

最新推荐文章于 2013-01-16 16:12:27 发布

w286332849

最新推荐文章于 2013-01-16 16:12:27 发布

阅读量727

点赞数

CC 4.0 BY-SA版权

文章标签： javascript path stylesheet tree function import

本文链接：https://blog.youkuaiyun.com/w286332849/article/details/7207582

本文介绍了一种使用Java Web技术实现动态树形菜单的方法，通过遍历数据结构生成前端展示所需的树形结构，并设置了相应的点击事件。文章展示了如何设置树节点图标路径、节点数据及点击事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/tld/c.tld" prefix="c" %>   
<%String path = request.getContextPath();%>
<html>
<link href="<%=path%>/css/page.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="<%=path%>/commonnew/js/common.js"></script>
<script language="JavaScript" src="<%=path %>/js/MzTreeView10.js"></script>
<style type="text/css">
      a{TEXT-DECORATION:none}
      <!--   
          a:link{color:#0066FF}   
          a:visited{color:#0066FF}   
          a:active{color:#0066FF}   
      --> 
<!--
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #ffffff;
    background-image: url();
    A { text-decoration: none};
}
h1,h2,h3,h4,h5,h6 {
    font-family: ;
}
-->
</style>
 <script language="JavaScript">

var tree = new MzTreeView("tree");
tree.setIconPath("<%=path %>/images/tree/");
tree.nodes['999999999_999999999'] = 'text:999999';
tree.nodes['0_1'] = 'text:产品类别';

<c:forEach items="${productClassTree}" var="tree" varStatus="myVar">
tree.nodes['${tree.pid+1}_${tree.id+1}'] = 'text:${tree.name};method:onClick(${tree.id},"${tree.name}";url:<%=path %>/price/productClass!getProductList.action?
query.parentId=${tree.id}';
</c:forEach>

  tree.setURL("#");
    tree.setTarget("productClassListFrame");
   
   function onClick(treeId,treeName) {
   //alert('a');
   }
</script> 
<body background="/price/images/bg.gif">
       <SCRIPT LANGUAGE="JavaScript">
          document.write(tree.toString());                   
  </SCRIPT>
    </body>
</html>