jsp树形菜单完整代码及截图

js树形菜单递归函数编写 JavaScript 的树形菜单递归函数通常涉及到处理包含父子关系的数据结构，比如树形结构。

这样的函数可以用来递归地遍历树形数据，以便在前端页面上构建出树形菜单。

下面是一个简单的示例代码：javascript.function generateTreeMenu(items, parentId) {。

let result = [];for (let item of items) {。

if (item.parentId === parentId) {。

let children = generateTreeMenu(items, item.id);if (children.length) {。

item.children = children;}。

result.push(item);}。

}。

return result;}。

在这个示例中，`generateTreeMenu` 函数接受一个包含所有菜单项的数组 `items` 和一个父节点的 `parentId` 作为参数。

它会遍历整个 `items` 数组，找到所有 `parentId` 与传入的`parentId` 相匹配的菜单项，并将它们递归地添加到父菜单项的`children` 属性中。

这个函数的递归调用使得它能够处理任意深度的树形结构，从而生成完整的树形菜单数据。

在实际应用中，你可以根据具体的需求对这个函数进行定制，比如添加其他属性、排序逻辑等。

需要注意的是，这只是一个简单的示例代码，实际应用中可能需要根据具体的数据结构和业务逻辑进行适当的修改和扩展。

希望这个示例能够帮助到你。

树形菜单及其事件儿处理（java实现）效果图如下：import java.awt.BorderLayout;import java.awt.EventQueue;import javax.swing.JFrame;import javax.swing.JPanel;import javax.swing.JScrollPane;import javax.swing.JSplitPane;import javax.swing.JTextArea;import javax.swing.JTree;import javax.swing.UIManager;import javax.swing.event.TreeSelectionEvent;import javax.swing.event.TreeSelectionListener;import javax.swing.tree.DefaultMutableTreeNode;import javax.swing.tree.DefaultTreeModel;import javax.swing.tree.T reePath;/*** 树形菜单及其事件处理** @author xlfdzhf*/@SuppressWarnings("serial")public class TreeEventFrame extends JFrame {private JSplitPane splitPane;private JPanel leftPanel;private JPanel rightPanel;private JTree tree;private JTextArea textArea;TreeEventFrame(){setSize( 500, 300 );setLayout( new BorderLayout());splitPane = new JSplitPane( JSplitPane.HORIZONTAL_SPLIT );//1.左侧DefaultMutableTreeNode rootNode = new DefaultMutableTreeNode("学科");DefaultMutableTreeNode level_1Node = new DefaultMutableTreeNode("数学");DefaultMutableTreeNode level_2Node = new DefaultMutableTreeNode("物理");rootNode.add( level_1Node );rootNode.add( level_2Node );DefaultMutableTreeNode level_11Node = new DefaultMutableTreeNode("小学数学");DefaultMutableTreeNode level_12Node = new DefaultMutableTreeNode("初中数学");DefaultMutableTreeNode level_13Node = new DefaultMutableTreeNode("高中数学");level_1Node.add(level_11Node);level_1Node.add(level_12Node);level_1Node.add(level_13Node);DefaultMutableTreeNode level_21Node = new DefaultMutableTreeNode("初中物理");DefaultMutableTreeNode level_22Node = new DefaultMutableTreeNode("高中物理");DefaultMutableTreeNode level_23Node = new DefaultMutableTreeNode("大学物理");level_2Node.add(level_21Node);level_2Node.add(level_22Node);level_2Node.add(level_23Node);//面板设置leftPanel = new JPanel();leftPanel.setLayout( new BorderLayout());final JScrollPane leftScrollPane = new JScrollPane();DefaultTreeModel treeModel = new DefaultTreeModel( rootNode );tree = new JTree( treeModel );leftScrollPane.setViewportView( tree );leftPanel.add( leftScrollPane , BorderLayout.CENTER );splitPane.setDividerLocation( 120 );splitPane.setLeftComponent( leftPanel );getContentPane().add( splitPane , BorderLayout.CENTER );//2.右侧final JScrollPane rightScrollPane = new JScrollPane();rightPanel = new JPanel();rightPanel.setLayout( new BorderLayout());textArea = new JTextArea();rightPanel.add( textArea, BorderLayout.CENTER );rightScrollPane.setViewportView( rightPanel );splitPane.setRightComponent( rightScrollPane );//3.树的事件处理tree.addTreeSelectionListener( new TreeSelectionListener(){@Overridepublic void valueChanged(TreeSelectionEvent arg0) {//如果不被选，则不执行，反之，执行if ( !tree.isSelectionEmpty()){//获得所选节点的路径名TreePath[] selectPaths = tree.getSelectionPaths();for ( int i = 0; i < selectPaths.length; i ++ ){//System.out.println( selectPaths[ i ]);//以Object数组的形式返回该路径中的所有节点的对象Object[] paths = selectPaths[ i ].getPath();for ( int j = 0; j < paths.length; j ++ ){//System.out.print( paths[ j ] + " -> " );DefaultMutableTreeNode node = (DefaultMutableTreeNode) paths[ j ];textArea.append( node.getUserObject() + (( j == paths.length -1 ) ? "":" -> ") );//(( j == paths.length -1 ) ? "":" -> ")表示的是不在最后一个节点加入“->”符号}textArea.append("\n");}//System.out.println();}}});}public static void main(String[] args) {EventQueue.invokeLater( new Runnable(){@Overridepublic void run() {try {UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());} catch (Exception e) {}TreeEventFrame frame = new TreeEventFrame();frame.setVisible( true );frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );}});}}。

java实现遍历树形菜单两种实现代码分享⽂本主要向⼤家分享了java实现遍历树形菜单的实例代码，具体如下。

OpenSessionView实现：package org.web;import java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import org.dao.BaseHibernateDao;import org.hibernate.Hibernate;import org.hibernate.Session;import org.hibernate.Transaction;public class OpenSessionView extends BaseHibernateDao implements Filter {/**(⾮ Javadoc)* <p>Title: destroy</p>* <p>Description(描述): </p>* @see javax.servlet.Filter#destroy()*/@Overridepublic void destroy() {// TODO Auto-generated method stub}/**(⾮ Javadoc)* <p>Title: doFilter</p>* <p>Description(描述): </p>* @param arg0* @param arg1* @param arg2* @throws IOException* @throws ServletException* @see javax.servlet.Filter#doFilter(javax.servlet.ServletRequest, javax.servlet.ServletResponse, javax.servlet.FilterChain)*/@Overridepublic void doFilter(ServletRequest arg0, ServletResponse arg1,FilterChain arg2) throws IOException, ServletException {Session session = null;Transaction tx = null;try {session = getSession();tx = session.beginTransaction();arg2.doFilter(arg0, arg1);mit();}catch (Exception e) {e.printStackTrace();tx.rollback();}finally{closeSession();}}/**(⾮ Javadoc)* <p>Title: init</p>* <p>Description(描述): </p>* @param arg0* @throws ServletException* @see javax.servlet.Filter#init(javax.servlet.FilterConfig)*/@Overridepublic void init(FilterConfig arg0) throws ServletException {// TODO Auto-generated method stub}}TreeAction实现package org.web;import net.sf.json.JSONArray;import net.sf.json.JSONObject;import org.Service.IVoteTreeService;import org.Service.impl.VoteTreeServiceImpl;import com.alibaba.fastjson.JSON;import com.opensymphony.xwork2.ActionSupport;public class TreeAction extends ActionSupport {private JSONArray treejson;private IVoteTreeService voteService = new VoteTreeServiceImpl();public String getTree(){treejson = voteService.getTreeJson();return SUCCESS;}public JSONArray getTreejson() {return treejson;}public void setTreejson(JSONArray treejson) {this.treejson = treejson;}}总结以上就是本⽂关于java实现遍历树形菜单两种实现代码分享的全部内容，希望对⼤家有所帮助。

树形菜单jsTree使⽤⽅法jsTree版本：3.0.4在 MVC中使⽤jsTreeModel：public class Department{public int Id { get; set; }public string Name { get; set; }public int PId { get; set; }}数据库：Controller：jsTree既可以⼀次性把所有节点都加载到客户端，也可以只加载⼀层，点击节点后再去服务端获取下层节点。

对于⼩的菜单可以⼀次性加载完，如果节点很多，可以按需加载（lazy loading）。

1、⼀次性加载完所有节点public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* ⼀次性加载完所有节点.* 前端只需配置 'data': {'url': '/Home/GetTreeData','dataType': 'json'* } 不⽤给服务端传值* 服务端不需写where*/var items=from item in db.Departmentselect new{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = };return Json(items, JsonRequestBehavior.AllowGet);}2、按需加载节点（lazy loading）public JsonResult GetTreeData(int clickId = 0){// use databasevar db=new Salary.Models.EntityContext();/* 异步加载节点（按需）前端需提供id传给服务端：'data': function (node) {return { id: node.id };}后端要在linq中加where筛选*/var items=from item in db.Departmentwhere item.PId == clickId // 在服务端要把所有上级节点找出来select new// 匿名类可以添加需要的字段，⽐如HasChildren{id = item.Id,parent = item.PId.ToString() == "0" ? "#" : item.PId.ToString(), // root必须是# ！text = ,children = db.Department.Any(p => p.PId == item.Id) // true|false 是否有⼦项};return Json(items, JsonRequestBehavior.AllowGet);}View：<div id="jstree">@section scripts{<link href="~/Content/jstree/themes/default/style.min.css" rel="stylesheet"/><script src="~/Scripts/jstree/jstree.js"></script><script>$(document).ready(function () {$("#jstree").jstree({"core": {//'initially_open':["abc"],'data': {'url': '/Home/GetTreeData','dataType': 'json','data': function (node) { // 传给服务端点击的节点//return { id: node.id == "#" ? "0" : node.id };return { clickId: node.id };},success: function () {//alert('ok');}}}});// 展开节点$("#jstree").on("loaded.jstree", function (event, data) {// 展开所有节点//$('#jstree').jstree('open_all');// 展开指定节点//data.instance.open_node(1); // 单个节点（1 是顶层的id）data.instance.open_node([1, 10]); // 多个节点 (展开多个⼏点只有在⼀次性装载后所有节点后才可⾏） });// 所有节点都加载完后$("#jstree").on("ready.jstree", function (event, data) {//alert('all ok');data.instance.open_node(1); // 展开root节点//// 隐藏根节点 /questions/10429876/how-to-hide-root-node-from-jstree$("#1_anchor").css("visibility", "hidden");$("li#1").css("position", "relative")$("li#1").css("top", "-20px")$("li#1").css("left", "-20px")$(".jstree-last .jstree-icon").first().hide();});// 获得点击节点的id$('#jstree').on("changed.jstree", function (e, data) {console.log("The selected nodes are:");console.log(data.selected);alert('node.id is:' + data.node.id);alert('node.text is:'+data.node.text);console.log(data);// TODO: 传递给Tab//$.ajax({// 'url': 'Home/GetTreeData/',// 'data': { 'id': data.node.id }//});});});// end ready</script>根节点的⽗项是0，根节点只有⼀个，似乎显⽰出来也不好看：所以我们把它隐藏起来：PS:ready 和loaded 的区别：loaded.jstree: triggered after the root node is loaded for the first timeready.jstree : triggered after all nodes are finished loading参考：--End--。

[JSP页面文件目录树源码(递归算法)]递归创建文件夹目录树htmlheadtitle/titlemeta http-equiv=“Content-Type" content="text/html;charset=gb2312";script language="JavaScript"!--function MM_goToURL() { //v3.0var i, args=MM_goToURL.arguments; document.MM_returnValue = false;for (i=0; i(args.length-1); i+=2) eval(args[i]+".location=""+args[i+1]+""");}//--/scriptlink href="css/ip.css" rel="stylesheet" type="text/css"/headbody topmargin = "0" leftmargin = "0" marginheight = "0" marginwidth = "0" bgcolor="#FFFFFF"table border="0" cellspacing="0" cellpadding="0" height="80%"trtd/td/trtr valign="top"td height="223" span id="menus"/spanspan id="view"/span/td/trtr valign="bottom"td /td/tr/tablediv align="right"/div/bodyscript/*** 构造树，初值为0*/function isbrother(){var is=flase;}function tree(n) {var id = new Array("bar","pad","IMG src="/htmldata/2005-08-02/images/midnodeline.gif"border=0 align="absmiddle"IMG src="/htmldata/2005-08-02/images/close.gif "border=0 align="absmiddle"","IMG src="/htmldata/2005-08-02/images/midclosedfolder.gif "border=0 align="absmiddle"IMG src="/htmldata/2005-08-02/images/close.gif "border=0 align="absmiddle"","IMG src="/htmldata/2005-08-02/images/lastnodeline.gif"border=0 align="absmiddle"IMG src="/htmldata/2005-08-02/images/close.gif "border=0 align="absmiddle"if(n == 0) { // 初始化变量n = 1;i = 0;s = "";}s += "table border=0 cellspacing=0 cellpadding=0for(;itree_ar.length-1;i++) {var k = (n = tree_ar[i+1])?0:1;if(tree_ar[i]==false){id="IMG src="/htmldata/2005-08-02/images/lastnodeline.gif"border=0 align="absmiddle"IMG src="/htmldata/2005-08-02/images/close.gif "border=0 align="absmiddle"}s += "tr id=""+id[k]+"" value="+i+"td "+id[k+2]+"/tdtd"+tree_ar[i]+"/td/tr // // 构造节点，注意这里的自定义属性value。

Bootstrap框架建⽴树形菜单（Tree）的实例代码这⾥的Tree指的是树形菜单，这篇⽂章通过⼀个实例来讲解⼀下，在Bootstrap框架下怎么去建⽴⼀个树形菜单。

前提：先添加Bootstrap和JQ的引⽤<link rel="stylesheet" type="text/css" href="bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="external nofollow" ><script src="bootstrap-3.3.0-dist/dist/js/jquery-1.11.2.min.js"></script><script src="bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>HTML CODE<div class="tree well"><ul><li> <span><i class="icon-folder-open"></i> 廊坊师范学院</span><ul><li> <span><i class="icon-minus-sign"></i> 教育学院</span><ul><li> <span><i class="icon-leaf"></i> 学前教育</span> </li></ul></li><li> <span><i class="icon-minus-sign"></i> 物电学院</span><ul><li> <span><i class="icon-leaf"></i> 电⽓⼯程技术</span> </li><li> <span><i class="icon-minus-sign"></i> 电⼦信息科学技术</span><ul><li> <span><i class="icon-minus-sign"></i> 电⼦⼀班</span><ul><li> <span><i class="icon-leaf"></i> 宋笑</span> </li><li> <span><i class="icon-leaf"></i> ⼆盟</span> </li></ul></li><li> <span><i class="icon-leaf"></i> 电⼦⼆班</span> </li></ul></li><li> <span><i class="icon-leaf"></i> 物理学</span> </li></ul></li></ul></li></ul></div>CSS CODE（为树形菜单添加样式，使其符合Bootstrap框架的风格）.tree {min-height:20px;padding:19px;margin-bottom:20px;background-color:#fbfbfb;border:1px solid #999;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)}.tree li {list-style-type:none;margin:0;padding:10px 5px 0 5px;position:relative}.tree li::before, .tree li::after {content:'';left:-20px;position:absolute;right:auto}.tree li::before {border-left:1px solid #999;bottom:50px;height:100%;top:0;width:1px}.tree li::after {border-top:1px solid #999;height:20px;top:25px;width:25px}.tree li span {-moz-border-radius:5px;-webkit-border-radius:5px;border:1px solid #999;border-radius:5px;display:inline-block;padding:3px 8px;text-decoration:none}.tree li.parent_li>span {cursor:pointer}.tree>ul>li::before, .tree>ul>li::after {border:0}.tree li:last-child::before {height:30px}.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {background:#eee;border:1px solid #94a0b4;color:#000}JS CODE<script type="text/javascript">//为节点添加展开，关闭的操作$(function(){$('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');$('.tree li.parent_li > span').on('click', function (e) {var children = $(this).parent('li.parent_li').find(' > ul > li');if (children.is(":visible")) {children.hide('fast');$(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else {children.show('fast');$(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); }e.stopPropagation();});});</script>效果：⼀棵符合Bootstrap风格的树就这么建造完成了，优点⾃不⽤说：整洁，美观。

Vue.js递归组件实现树形菜单最近看了 Vue.js 的递归组件，实现了⼀个最基本的树形菜单。

main.js 作为⼊⼝：import Vue from 'vue'import main from './components/main.vue'new Vue({el: '#app',render: h => h(main)})它引⼊了⼀个组件 main.vue：<template><div><my-tree :data="theData" :name="menuName" :loading="loading" @getSubMenu="getSubMenu"></my-tree></div></template><script>const myData = [{id: '1',menuName: '基础管理',menuCode: '10'},{id: '2',menuName: '商品管理',menuCode: ''},{id: '3',menuName: '订单管理',menuCode: '30',children: [{menuName: '订单列表',menuCode: '31'},{menuName: '退货列表',menuCode: '32',children: []}]},{id: '4',menuName: '商家管理',menuCode: '',children: []}];const subMenuData1 = {parentId: '1',children: [{menuName: '⽤户管理',menuCode: '11'},{id: '12',menuName: '⾓⾊管理',menuCode: '12',children: [{menuName: '管理员',menuCode: '121'},{menuName: 'CEO',menuCode: '122'},{menuName: 'CFO',menuCode: '123'},{menuName: 'COO',menuCode: '124'},{menuName: '普通⼈',menuCode: '124'}]},{menuName: '权限管理',menuCode: '13'}]};const subMenuData2 = {parentId: '2',children: [{menuName: '商品⼀',menuCode: '21'},{id: '22',menuName: '商品⼆',menuCode: '22',children: [{menuName: '⼦类商品1',menuCode: '221'},{menuName: '⼦类商品2',menuCode: '222'}]}]};import myTree from './common/treeMenu.vue'export default {components: {myTree},data () {return {theData: myData,menuName: 'menuName', // 显⽰菜单名称的属性loading: false}},methods: {getSubMenu (menuItem, callback) {this.loading = true;if (menuItem.id === subMenuData1.parentId) {this.loading = false;menuItem.children = subMenuData1.children;callback(menuItem.children);}setTimeout(() => {if (menuItem.id === subMenuData2.parentId) {this.loading = false;menuItem.children = subMenuData2.children;callback(menuItem.children);}}, 2000);}}}</script>subMenuData1, subMenuData2 存放⼦菜单数据，可以从服务器获取，以实现动态加载。

树形菜单，熟悉Windows程序管理器的读者一定不会陌生。

单击项目左侧的+号，项目展开；再次单击，项目收缩。

读过很多篇有关树形菜单的JavaScript 实现方法，原理很简单，都是利用Style中display属性的控制。

笔者本文的重点并不侧重于此，倒是想谈一谈如何实现每一次从数据库中提取数据并动态更新树形菜单。

树形菜单主要用来导航。

网站有很多栏目，每个栏目下有很多子栏目，栏目经常变动，如增加新栏目，改变现有栏目名称，调整主次栏目之间关系等等，如果每一次都去改动页面代码，非常不便。

而且因为信息都存放在数据库中，动态实现变得可能和必要。

本文并不侧重理论，只是为大家提供自己的一段代码，和大家一起来探讨一下PHP实现问题。

为了便于说明，笔者对数据库作了一些改动，假设菜单字符串存放在menu表中，main字段存放主菜单字符串，sub字段存放子菜单字符串，subid字段存放子菜单标识。

<?php$DB = new My_DB();$DB->query("select subid, main from menu group by main order by subid"); while ($DB->next_record()){$Main[] = $DB->f("main");$Key[] = $DB->f("subid");}/*首先，连接数据库，查询所谓的栏目名称。

以上代码采用了PHPLib中的数据库函数，其中，$Main数组用来存放主菜单字符串，$Key数组用来存放子菜单关键字。

大家可以采用多种方法，因人而异*/for ($i=0;$i<COUNT($MAIN);$I++){$j=0;$DB->query("select sub, subid from menu where main='".$Main[$i]."'"); ////利用query查询出与当前主菜单匹配的所有子菜单字符串?>/*以下代码和HTML代码结合到一起，大家看起来可能会不习惯，但这样代码显得简洁多了。

在页面中树形菜单1、应用XTree树型控件（1）XTree树型控件xtree.js是Web开发中运用较多的一个树型控件。

其入门简单，功能强大，很多人在它的基础上开发出了自己的树型控件。

XloadTree也是公司的基于JavaScript的建立树型目录的开源产品，扩展性强，使用简单。

由于XloadTree是基于XmlHttp请求/响应模型，必须使用http协议访问代码才可以正确加载XML文件。

（2）下载XTree树型控件（编程方式的系统包）（3）下载XTree树型控件（XML文件方式的系统包、而且该XML文件可以是动态创建）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:urlvalue="/adminForwordAction!forwardQueryRegisterUserInfo.action" />';forwardQueryUserInfoItem.target="mainFrame";tree_userInfoManaeFolder.add(forwardQueryUserInfoItem);var forwardQueryVIPUserInfoItem=new WebFXTreeItem("查询VIP用户信息"); forwardQueryVIPUserInfoItem.action='<c:urlvalue="/adminForwordAction!forwardQueryVIPUserInfo.action" />';forwardQueryVIPUserInfoItem.target="mainFrame";tree_userInfoManaeFolder.add(forwardQueryVIPUserInfoItem);var forwardShowRegisterUserInfoItem=new WebFXTreeItem("显示用户信息"); forwardShowRegisterUserInfoItem.action='<c:urlvalue="/adminForwordAction!forwardShowRegisterUserInfo.action" />';forwardShowRegisterUserInfoItem.target="mainFrame";tree_userInfoManaeFolder.add(forwardShowRegisterUserInfoItem);var forwardDeleteRegisterUserInfoItem=new WebFXTreeItem("删除用户信息"); forwardDeleteRegisterUserInfoItem.action='<c:urlvalue="/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）执行后的结果为。

JSP中的⼀个树型结构看⽅⼒勋的javaWeb,采⽤左右值来表⽰树型结构（就是俺门的多级分类）表结构页⾯代码<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%@taglib uri="/jsp/jstl/core" prefix="c" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>树状结构</title><script src="${pageContext.request.contextPath }/js/xtree.js"></script><link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath }/css/xtree.css"></head><body><script type="text/javascript"><c:forEach var="c" items="${list}"><c:if test="${c.depth==1}">var tree = new WebFXTree('${}');tree.target="right";tree.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}";</c:if><c:if test="${c.depth==2}">var node${c.depth} = new WebFXTreeItem('${}');node${c.depth}.target="right";node${c.depth}.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}";tree.add(node${c.depth});</c:if><c:if test="${c.depth>2}">var node${c.depth} = new WebFXTreeItem('${}');node${c.depth}.target="right";node${c.depth}.action = "${pageContext.request.contextPath}/servlet/AddChildServlet?id=${c.id}"; node${c.depth-1}.add(node${c.depth});</c:if></c:forEach>document.write(tree);</script></body></html>View Code呈现后html<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>树状结构</title><script src="/AAPlan/js/xtree.js"></script><link type="text/css" rel="stylesheet" href="/AAPlan/css/xtree.css"></head><body><script type="text/javascript">var tree = new WebFXTree('商品');tree.target="right";tree.action = "/AAPlan/servlet/AddChildServlet?id=1";var node2 = new WebFXTreeItem('平板电视');node2.target="right";node2.action = "/AAPlan/servlet/AddChildServlet?id=2";tree.add(node2);var node3 = new WebFXTreeItem('长虹');node3.target="right";node3.action = "/AAPlan/servlet/AddChildServlet?id=5";node2.add(node3);var node3 = new WebFXTreeItem('索尼');node3.target="right";node3.action = "/AAPlan/servlet/AddChildServlet?id=6";node2.add(node3);var node2 = new WebFXTreeItem('冰箱');node2.target="right";node2.action = "/AAPlan/servlet/AddChildServlet?id=3";tree.add(node2);var node3 = new WebFXTreeItem('西门⼦');node3.target="right";node3.action = "/AAPlan/servlet/AddChildServlet?id=7";node2.add(node3);var node2 = new WebFXTreeItem('笔记本');node2.target="right";node2.action = "/AAPlan/servlet/AddChildServlet?id=4";tree.add(node2);var node3 = new WebFXTreeItem('thinkpad');node3.target="right";node3.action = "/AAPlan/servlet/AddChildServlet?id=8";node2.add(node3);var node3 = new WebFXTreeItem('dell');node3.target="right";node3.action = "/AAPlan/servlet/AddChildServlet?id=9";node2.add(node3);document.write(tree);</script></body></html>View Code说明:1.根据上⾯的数据列表可以知道，某个node节点的⽗节点是最近⼀个depth⽐当前节点⼩⼀的节点,通过node${c.depth-1}.add(node${c.depth})可以将当前节点添加到最近⼀次定义的上层节点下（也就是⽗节点）。

Java构建树形菜单的实例代码（⽀持多级菜单）效果图：⽀持多级菜单。

菜单实体类：public class Menu {// 菜单idprivate String id;// 菜单名称private String name;// ⽗菜单idprivate String parentId;// 菜单urlprivate String url;// 菜单图标private String icon;// 菜单顺序private int order;// ⼦菜单private List<Menu> children;// ... 省去getter和setter⽅法以及toString⽅法}菜单⼀般需要排序，我们根据Menu的order字段进⾏排序：　/** 排序,根据order排序*/public Comparator<Menu> order(){Comparator<Menu> comparator = new Comparator<Menu>() {@Overridepublic int compare(Menu o1, Menu o2) {if(o1.getOrder() != o2.getOrder()){return o1.getOrder() - o2.getOrder();}return 0;}};return comparator;}⽣成树的⽅法：public Map<String,Object> findTree(){Map<String,Object> data = new HashMap<String,Object>();try {//查询所有菜单List<Menu> allMenu = menuDao.findTree();//根节点List<Menu> rootMenu = new ArrayList<Menu>();for (Menu nav : allMenu) {if(nav.getParentId().equals("0")){//⽗节点是0的，为根节点。

BootStrapJstree树形菜单的增删改查的实现源码1.⾸先需下载jstree的插件点击打开链接2.在页⾯引⼊插件js⽂件css⽂件<link rel="stylesheet" href="plugins/jstree/themes/classic/style.css" rel="external nofollow" ><script type="text/javascript" src="plugins/jstree/_lib/jquery.js"></script><script type="text/javascript"src="plugins/jstree/_lib/jquery.cookie.js"></script><script type="text/javascript"src="plugins/jstree/_lib/jquery.hotkeys.js"></script><script type="text/javascript" src="plugins/jstree/jquery.jstree.js"></script>3.初始化控件1）html<div id="demo2" class="demo" style="height:100px;"></div>2）js 使⽤ demo2来初始化树形控件<script type="text/javascript" class="source below">$(function() {$("#demo2").jstree({"json_data" : {"ajax" : {"url" : "http://localhost:8080/MemberManager/DepartmentTreeJson","data" : function(n) {// the result is fed to the AJAX request `data` optionreturn {"operation" : "get_children","id" : n.attr ? n.attr("id").replace("node_",""): 1};}}},"plugins" : ["themes","json_data","ui","crrm","contextmenu","search" ],}).bind("loaded.jstree",function(event, data) {}).bind("select_node.jstree",function(event, data) {if (data.rslt.obj.attr("id") != undefined) {}}).bind("remove.jstree",function(e, data) {data.rslt.obj.each(function() {$.ajax({async : false,type : 'POST',url : "http://localhost:8080/MemberManager/CreateNodeForDepartment",data : {"operation" : "remove_node","id" : this.id.replace("node_", "")},success : function(r) {if (!r.status) {data.inst.refresh();}}});});}).bind("remove.jstree",function(e, data) {data.rslt.obj.each(function() {$.ajax({async : false,type : 'POST',url : "http://localhost:8080/MemberManager/CreateNodeForDepartment", data : {"operation" : "remove_node","id" : this.id.replace("node_","")},success : function(r) {if (!r.status) {data.inst.refresh();}}});});}).bind("create.jstree",function(e, data) {$.post("http://localhost:8080/MemberManager/CreateNodeForDepartment",{"operation" : "create_node","id" : data.rslt.parent.attr("id").replace("node_",""),"position" : data.rslt.position,"title" : ,"type" : data.rslt.obj.attr("rel")},function(r) {if (r.status) {$(data.rslt.obj).attr("id", "node_" + r.id);} else {data.inst.refresh();$.jstree.rollback(data.rlbk);}});}).bind("rename.jstree",function(e, data) {$.post("http://localhost:8080/MemberManager/CreateNodeForDepartment",{"operation" : "rename_node","id" : data.rslt.obj.attr("id").replace("node_",""),"title" : data.rslt.new_name},function(r) {if (!r.status) {data.inst.refresh();$.jstree.rollback(data.rlbk);}});})// 1) the loaded event fires as soon as data is parsed and inserted// 2) but if you are using the cookie plugin or the core `initially_open` option:.one("reopen.jstree",function(event, data) {})// 3) but if you are using the cookie plugin or the UI `initially_select` option:.one("reselect.jstree",function(event, data) {});});</script></pre>4.代码解析<p></p><p><pre name="code" class="java">import java.util.List;public class Department {// 部门idprivate String departmentid;// 部门名称private String name;// ⽗级部门IDprivate String parentid;//同级之间的排序。

javascript树形结构的⼆维数组转树形结构，⽆限分类菜单复制代码另存为⼀个html⽂件即可测试使⽤。

包含了三个部分，⼀是⼆维数据转树形结构，⼆是树形结构的数据转ul li格式的页⾯格式，三是处理菜单的显⽰和隐藏。

jquery⽂件可以⾃⾏下载包含。

<title>树形结构的⼆维数组转树形结构，⽆限分类菜单</title>欢迎光临程序员学习笔记：<a href='/codeaaa'>/codeaaa</a><div id='menu'></div><script src="https:///jquery/2.2.4/jquery.min.js"></script><script>var list =[{"id": 2,"title": "西安","parent_id": 0},{"id": 3,"title": "成都","parent_id": 0},{"id": 4,"title": "华阳","parent_id": 3},{"id": 5,"title": "⼴都上街","parent_id": 4},{"id": 18,"title": "⼴都上街156号","parent_id": 5},{"id": 19,"title": "⼴都上街156号","parent_id": 18},{"id": 6,"title": "龙泉","parent_id": 3},{"id": 8,"title": "青⽩江","parent_id": 3},{"id": 9,"title": "正北上街","parent_id": 4},{"id": 10,"title": "重庆","parent_id": 0},{"id": 11,"title": "长寿","parent_id": 10}];$(document).ready(function() {// 线性数据转化为树。

在上一篇文章中介绍JavaScript实现级联下拉菜单的例子，本篇继续介绍一个利用现存的JavaScript代码配合struts构成一个树型菜单的例子。

大家知道，树型菜单在应用中有着十分广泛的用途。

实现树型菜单的途径较多，本文介绍的一种觉得理解起来比较直观，与上篇文章的方法比较类似：就是将树型菜单的节点保存在数据库表中（当然，在实际项目中，节点的信息往往并不是放在一个单一的表中的。

比如：在一个权限管理系统中，这些信息可能分别放在用户表、角色表、功能表等表中，只要设法让查询出来的结果与下面给出的表格的内容相似就可以了。

只要稍微有些数据库方面的知识做到这点并不难,详细的实现细节超出了本文的主题,不在此细说）。

通过数据访问对象将其从数据库中查出后放在一个集合对象中，并将该集合对象传递给客户端，再用一段现存的JavaScript代码--dtree(一个免费的JavaScript程序)来操作集合中的数据。

大方向确定之后，我们就来具体着手来实现它。

根据dtree的要求,我们来建一个数据库表来存储树的节点信息，表名为functions，其结构如下：在表中输入如下一些记录以供后面的实验用：到此，数据库方面的准备工作就告一段落。

接下来的工作我们仍然在先前介绍的mystruts项目中进行。

先编写一个名为：FunctionsForm 的ActionForm，其代码如下：因为我们的树型节点的数据都存储在数据库表中，接下来，要做一个数据访问对象类，名称为：FunctionsDao.java，其代码如下：这里值得注意的是：在以往我们见到的一些显示树型菜单的程序，如：一些asp程序中往往简单地采用递归调用的方法来查找到树的各个节点。

这对那些树的深度不确定的场合还是有些用处，但这种处理方法也有一个致命的弱点，那就是反复地进行数据库查询，对一些节点较多的应用，对应用程序性能的影响是非常大的，有时会慢得让人难以接受；而在实际的应用中大多数情况下树的深度往往是有限的，如：用于会计科目的树一般最多也在六层以下。

简单但完整的树形列表+多选（复选）框实现⽅式多级分类通常做成树形的，如果分类是单选的，只要递归返回树形结构，⽤下拉列表显⽰就ok了。

当分类要求多选的时候，我们需要给每个分类都加上复选框。

在⾥TreeView可以显⽽易见的做到这个，然⽽TreeView服务端控件不但⽣成⽐较ugly的html代码，⽽且所需写代码的时候其实也并不是最少。

下⾯给出我的⼀个简单(代码数较少)但是完整的实现⽅式，除了显⽰，还包括取得选中值以及对树形列表赋值。

需要达到的效果如下，点击⼀个span可展开或收起树形列表。

我选择⽤ul显⽰树形列表，这也是⼀个常⽤的⽅式。

下⾯是aspx页⾯的代码，⽤jquery编写相关的脚本。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title></title><style type="text/css">body { font-size: 12px; font-family: Verdana, 微软雅⿊; }ul { margin: 0px 10px; padding: 0px 10px; list-style: none; }li { line-height: 16px; }</style><script src="Scripts/jquery.js" type="text/javascript"></script><script type="text/javascript">//选中itemList⾥的保存Id的Checkboxfunction checkItems(nodeName, itemList) {var arr = itemList.split(',');$.each(arr, function (i, n) {$("#" + nodeName + "-" + arr[i]).attr("checked", "checked");});}$(function () {//点击展开或收起树形列表$("#spCategory").click(function (event) {event.stopPropagation();var offset = $(this).offset();$('#ulCategory').css({ left: offset.left, top: offset.top + 30 }).toggle();});//取消弹出层本⾝冒泡事件$("#ulCategory").click(function (event) { event.stopPropagation(); });//点击页⾯其他位置使弹出层消失$(document).click(function () { $("#ulCategory").hide(); });});</script></head><body><span id="spCategory" style="border: solid 1px silver; line-height: 25px; padding: 3px 5px; cursor: pointer; float: left;">点击这⾥展开或收起分类</span><ul id="ulCategory" style="position: absolute; background-color: ActiveCaption; display: none;"><asp:Literal ID="ltrCategory" runat="server"></asp:Literal></ul></body></html>后台cs代码如下，主要是返回树形结构。

php教程+mysql教程+网页特效实现树形菜单代码这是一款由php+mysql数据库教程的读取数据库的内容再生成树型号菜单由js来控制*/?><html>< head>< meta http-equiv="content-type" content="text/html; charset=gb2312" />< title>类别目录树</title>< script type="text/网页特效">function showmenu(menuid){if(menuid.style.display=="none"){menuid.style.display="";}else{menuid.style.display="none";}}< /script>< style>body{margin:0px;}table tr td{font-size:12px}< /style>< /head>< body><?php$globals["id"] =1; //用来跟踪下拉菜单的id号$layer=1; //用来跟踪当前菜单的级数//连接数据库$con=mysql_connect("localhost","root","123456");mysql_select_db("demo");//提取一级菜单$sql="select * from think_news where `f_id`=0";$result=mysql_query($sql,$con);//如果一级菜单存在则开始菜单的显示if(mysql_num_rows($result)>0) showtreemenu($con,$result,$id);function showtreemenu($con,$result,$layer){//取得需要显示的菜单的项目数$numrows=mysql_num_rows($result);//开始显示菜单，每个子菜单都用一个表格来表示echo "<table cellpadding='0' cellspacing='0' border='0' width='100%'>";for($rows=0;$rows<$numrows;$rows++){//将当前菜单项目的内容导入数组$menu=mysql_fetch_array($result);//提取菜单项目的子菜单记录集$sql="select * from think_news where f_id=$menu[id]";$result_sub=mysql_query($sql,$con);echo "<tr>";//如果该菜单项目有子菜单，则添加javascript onclick语句if(mysql_num_rows($result_sub)>0){echo "<td width='20' valign= 'top' ><span onclick='showmenu(menu".$globals['id'].")' ><img src='menu_minus.gif' border='0' align='absmiddle'></span></td>";echo "<td class='menu' >";}else{echo "<td width='20'><img src='menu_plus.gif' border='0' align='absmiddle' > </td>";echo "<td class='menu'>";}//如果该菜单项目没有子菜单，只显示菜单名称echo $menu["title"];echo "</td></tr>";//如果该菜单项目有子菜单，则显示子菜单if(mysql_num_rows($result_sub)>0){//指定该子菜单的id和style，以便和onclick语句相对应echo "<tr id=menu".$globals["id"]++." style='display:none'>";echo "<td width='20'> </td>";echo "<td>";//将级数加1$layer++;//递归调用showtreemenu()函数，生成子菜单showtreemenu($con,$result_sub,$layer);//子菜单处理完成，返回到递归的上一层echo "</td></tr>";}//子菜单处理完成，返回到递归的上一层，将级数减1$layer--;}echo "</table>";}。

bootstraptreetable树形⽹格，动态扩展，连数据库⼆话不说，先看看效果图：1、先来看写死的：展开前~~展开后~~怎么实现呢？先new ⼀个jsp⽂件，导⼊⼏个包，编写html代码，编写js代码，⼀个⽂件搞定！1 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>2 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">3 <html>4 <head>5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">6 <title>Insert title here</title>7 <script type="text/javascript" src="../bootstrap-3.3.7-dist/treeview/jquery.js"></script>8 <script type="text/javascript" src="../js/jquery.treetable.js"></script>9 <link rel="stylesheet" type="text/css" href="../css/jquery.treetable.css">10 <link rel="stylesheet" type="text/css" href="../css/jquery.treetable.theme.default.css">11 <script type="text/javascript">12 $(document).ready(function(){13 $("#treeTable").treetable({14 expandable : true,15 initialState:"expanded",16//expandable : true17 clickableNodeNames:true,//点击节点名称也打开⼦节点.18 indent : 30//每个分⽀缩进的像素数。