7月25日 SSM 周三

最新推荐文章于 2025-09-25 09:46:29 发布

原创最新推荐文章于 2025-09-25 09:46:29 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

2018 专栏收录该内容

337 篇文章

订阅专栏

本文介绍了一种利用ZTree插件实现动态加载菜单的方法。通过Ajax从服务器获取JSON格式的数据，然后使用jQuery和ZTree插件将其转换为可视化的树形结构。此方法适用于需要动态生成导航菜单的应用场景。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();%>

<html>
  <head>

    <title>My JSP 'left.jsp' starting page</title>

  <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
  <link rel="stylesheet" href="../ztree/css/zTreeStyle/zTreeStyle.css" type="text/css"></link>
  <script type="text/javascript" src="../ztree/js/jquery.ztree.all.js"></script>
  <script type="text/javascript">
    $(function (){
        var setting;
        var zTreeNodes;
        setting={
            data:{
                simpleData:{
                    enable:true,//启用简单数据
                    idKey:"mid",//子节点
                    pIdKey:"pid",//父节点
                    rootPId:0//根节点id
                },
                key:{
                    name:"mname",//展示的节点名称
                    url:"url",
                    target:"target"//模块
                }
            }
        }

        $.post(
            "<%=path%>/getzTreeNodes.do",
            {},
            function (data){
                zTreeNodes = data;
                $.fn.zTree.init($("#zTree"),setting,zTreeNodes);
            },"json"
        );
    });
  </script>
  </head>

  <body>
        <div id="zTree" class="zTree"></div>
  </body>
</html>