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

JS实现的树形菜单

<HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>树形菜单</TITLE><STYLE type="text/css">DIV {FONT-SIZE: 13px;COLOR: #000000;LINE-HEIGHT: 22px;}A {FONT-SIZE: 13px;COLOR: #000000;TEXT-DECORA TION: none}A:hover {FONT-SIZE: 13px;COLOR: #999999}</STYLE><SCRIPT language="JavaScript">function show(d1) {if (document.getElementById(d1).style.display == 'none') {document.getElementById(d1).style.display = 'block'; //如果触动的层如果处于隐藏状态，即显示} else {document.getElementById(d1).style.display = 'none'; //如果触动的层如果处于显示状态，即隐藏}}</SCRIPT></HEAD><BODY><DIV HEIGHT="30"><FONT color="#CC0000"><B><IMG src="../image/fold.gif"width="16" height="16" >树形菜单：</B></FONT></DIV><A href="javascript:onClick=show('1') "><IMGsrc="../image/fclose.gif" width="16" height="18" border="0">文学艺术</A><DIV id="1" style="display: none"><IMG src="../image/doc.gif" align="absmiddle">努力工作<BR><IMG src="../image/doc.gif" align="absmiddle">小说散文<BR><IMG src="../image/doc.gif" align="absmiddle">诗风词韵</DIV><DIV><A href="javascript: onClick=show('2') "><IMGsrc="../image/fclose.gif" width="16" height="18" border="0" align="absmiddle">贴图专区</A> </DIV><DIV id="2" style="display: none"><IMG src="../image/doc.gif" align="absmiddle">真我风采<BR><IMG src="../image/doc.gif" align="absmiddle">视频贴图<BR><IMG src="../image/doc.gif" align="absmiddle">行行摄摄<BR><IMG src="../image/doc.gif" align="absmiddle">Flash贴图</DIV></BODY></HTML>。

JavaScript源程序--树形菜单

<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>八种风格时间显示</a><br>
<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>显示登陆时间</a><br>
}
.STYLE5 {
font-family: "幼圆";
font-size: 20px;
color: #000099;
}
.STYLE6 {
font-family: "华文中宋";
font-size: 20px;
color: #000000;
}
.STYLE7 {
font-family: "华文新魏";
<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>文本静止不动</a><br>
<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>信息框显示链接</a><br>
<a href='#' target='_target'> <IMG SRC='blank.gif' BORDER=0>静止导航菜单</a><br>

js构造树形菜单

js构造树形菜单先上个效果图获取到的数据是这样的[{ id: 1, text: '⼀级菜单A', parentId: null },{ id: 2, text: '⼀级菜单B', parentId: null },{ id: 3, text: '⼀级菜单C', parentId: null },{ id: 4, text: '⼆级菜单AA', parentId: 1 },{ id: 5, text: '⼆级菜单AB', parentId: 1 },{ id: 6, text: '⼆级菜单AC', parentId: 1 },{ id: 7, text: '⼆级菜单BA', parentId: 2 },{ id: 8, text: '⼆级菜单BB', parentId: 2 },{ id: 9, text: '⼆级菜单BC', parentId: 2 },{ id: 10, text: '⼆级菜单CA', parentId: 3 },{ id: 11, text: '⼆级菜单CB', parentId: 3 },{ id: 12, text: '⼆级菜单CC', parentId: 3 },{ id: 13, text: '三级菜单AAA', parentId: 4 },{ id: 14, text: '三级菜单BAA', parentId: 7 },{ id: 15, text: '三级菜单CAA', parentId: 10 }]那如何将这些数据转化为树状结构并渲染出来先上完整代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>ul,li {list-style: none;}</style></head><body><div class="nav"></div></body><script>// 数据let navData = [{ id: 1, text: '⼀级菜单A', parentId: null },{ id: 2, text: '⼀级菜单B', parentId: null },{ id: 3, text: '⼀级菜单C', parentId: null },{ id: 4, text: '⼆级菜单AA', parentId: 1 },{ id: 5, text: '⼆级菜单AB', parentId: 1 },{ id: 6, text: '⼆级菜单AC', parentId: 1 },{ id: 7, text: '⼆级菜单BA', parentId: 2 },{ id: 8, text: '⼆级菜单BB', parentId: 2 },{ id: 9, text: '⼆级菜单BC', parentId: 2 },{ id: 10, text: '⼆级菜单CA', parentId: 3 },{ id: 11, text: '⼆级菜单CB', parentId: 3 },{ id: 12, text: '⼆级菜单CC', parentId: 3 },{ id: 13, text: '三级菜单AAA', parentId: 4 },{ id: 14, text: '三级菜单BAA', parentId: 7 },{ id: 15, text: '三级菜单CAA', parentId: 10 }];// let nav = document.getElementsByClassName('nav')let nav = document.querySelector('.nav')// 将数组置为树形let treeee = (function makeTreeData(arr, parentId) {let temp = []for (let i = 0; i < arr.length; i++) {if (arr[i].parentId === parentId) {temp.push(arr[i])arr[i].children = makeTreeData(navData, arr[i].id)}}return temp})(navData, null)console.log(treeee);// 创造dom树(function makeDomTree(data, node) {let ulfor (let i = 0; i < data.length; i++) {ul = document.createElement('ul')let li = document.createElement('li')li.innerHTML = data[i].textnode.appendChild(ul)ul.appendChild(li)if (data[i].children.length !== 0) {let element = makeDomTree(data[i].children, ul)ul.appendChild(element)}}return ul})(treeee, nav)</script></html>分为两步解析第⼀步将数据进⾏转化需要将数据转化为如下格式[{ id: 1,text: '⼀级菜单A',parentId: null ,children:[{ id: 4, text: '⼆级菜单AA', parentId: 1 ,children[{ id: 13, text: '三级菜单AAA', parentId: 4,children:[] }]},{ id: 5, text: '⼆级菜单AB', parentId: 1 ,children[]},{ id: 6, text: '⼆级菜单AC', parentId: 1 ,children[]}]},...]也就是说可以利⽤children属性让我们很清楚的看到，每个菜单的⼦菜单有多少项并包含着每项⼦菜单的每个属性代码时这样⼦的，利⽤递归算法直接构建数据let treeee = (function makeTreeData(arr, parentId) {let temp = []for (let i = 0; i < arr.length; i++) {if (arr[i].parentId === parentId) {temp.push(arr[i])arr[i].children = makeTreeData(navData, arr[i].id)}}return temp})(navData, null)console.log(treeee);第⼆步将数据渲染⾄页⾯let nav = document.querySelector('.nav')(function makeDomTree(data, node) {let ul //创建⼀个ul节点for (let i = 0; i < data.length; i++) {ul = document.createElement('ul')let li = document.createElement('li')li.innerHTML = data[i].textnode.appendChild(ul)ul.appendChild(li)//以上⼏步是将当前数组的每个项都作为⼀个li放置到ul中 //若有⼦项进⾏递归操作if (data[i].children.length !== 0) {let element = makeDomTree(data[i].children, ul)ul.appendChild(element)}}return ul //返回ul节点})(treeee, nav) //treeee是之前构建好的数据。

JavaScript生成树形菜单（递归算法）

JavaScript⽣成树形菜单（递归算法）1、最终效果图（这⾥仅为实现算法，并加载⾄页⾯，不做任何css界⾯优化）注释：本⽰例包含三级⽬录菜单，但实际上可⽀持N级（可使⽤该代码⾃⾏测试）2、数据源菜单信息⼀般来源于数据库中数据表，且为⾃连接表，其中包含主要字段（主键，菜单名称，⽗级id）；本⽰例在前端页⾯中使⽤对象数组模拟从数据库获取菜单信息；var menuArry = [{ id: 1, name: "办公管理", pid: 0 },{ id: 2, name: "请假申请", pid: 1 },{ id: 3, name: "出差申请", pid: 1 },{ id: 4, name: "请假记录", pid: 2 },{ id: 5, name: "系统设置", pid: 0 },{ id: 6, name: "权限管理", pid: 5 },{ id: 7, name: "⽤户⾓⾊", pid: 6 },{ id: 8, name: "菜单设置", pid: 6 },]; 注释：id——菜单主键id；name——菜单名称；pid——⽗级id3、程序设计菜单信息⼀般来源//菜单列表htmlvar menus = '';//根据菜单主键id⽣成菜单列表html//id：菜单主键id//arry：菜单数组信息function GetData(id, arry) {var childArry = GetParentArry(id, arry);if (childArry.length > 0) {menus += '<ul>';for (var i in childArry) {menus += '<li>' + childArry[i].name;GetData(childArry[i].id, arry);menus += '</li>';}menus += '</ul>';}}//根据菜单主键id获取下级菜单//id：菜单主键id//arry：菜单数组信息function GetParentArry(id, arry) {var newArry = new Array();for (var i in arry) {if (arry[i].pid == id)newArry.push(arry[i]);}return newArry;}注释：本⽰例菜单使⽤ul⽆序列表演⽰，menus变量为最终⽣成的菜单html4、运⾏GetData(0, menuArry)$("body").append(menus);注释：GetData(0, menuArry)，0——顶级菜单主键5、完整代码<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title><script src="jquery-1.8.3.min.js"></script></head><body><script type="text/javascript">$(function () {var menuArry = [{ id: 1, name: "办公管理", pid: 0 },{ id: 2, name: "请假申请", pid: 1 },{ id: 3, name: "出差申请", pid: 1 },{ id: 4, name: "请假记录", pid: 2 },{ id: 5, name: "系统设置", pid: 0 },{ id: 6, name: "权限管理", pid: 5 },{ id: 7, name: "⽤户⾓⾊", pid: 6 },{ id: 8, name: "菜单设置", pid: 6 },];GetData(0, menuArry)$("body").append(menus);});//菜单列表htmlvar menus = '';//根据菜单主键id⽣成菜单列表html//id：菜单主键id//arry：菜单数组信息function GetData(id, arry) {var childArry = GetParentArry(id, arry);if (childArry.length > 0) {menus += '<ul>';for (var i in childArry) {menus += '<li>' + childArry[i].name;GetData(childArry[i].id, arry);menus += '</li>';}menus += '</ul>';}}//根据菜单主键id获取下级菜单//id：菜单主键id//arry：菜单数组信息function GetParentArry(id, arry) {var newArry = new Array();for (var i in arry) {if (arry[i].pid == id)newArry.push(arry[i]);}return newArry;}</script></body></html>。

JSP自定义标签(一) 树形下拉选择菜单

<div>
</div>
</form>
<%
String para="";
String actionUrl="";
para=request.getParameter("id");
actionUrl=request.getParameter("actionUrl");
%>
<script language="javascript">
} else {
// first-time call, create the selector.
var selec = new Selector();
selec.textId=id;
selec.id="selector_"+id;
selec.valueId=id+"_value";
selec.path=path;
.append("' value='").append(value==null?"":value).append("'>");
out.println(tag.toString());
} catch (IOException e) {
e.printStackTrace();
}
return SKIP_BODY;
// the reference element that we pass to showAtElement is the button that
// triggers the selector. In this example we align the selector bottom-right

html js树形折叠菜单实例

html js树形折叠菜单实例HTML JS Treeview 可以帮助您在网站上创建一个树形折叠菜单。

以下是一个简单的示例：HTML代码：```html<!DOCTYPE html><html><head><title>Treeview Example</title><style>ul.treeview {list-style-type: none;padding: 0;margin: 0;}ul.treeview li {padding: 5px;position: relative;}ul.treeview li.expandable:before {content: '\25B6';position: absolute;left: -10px;}ul.treeview li.collapsible:before {content: '\25BC';position: absolute;left: -10px;}ul.treeview li ul {display: none;margin-left: 20px;}</style></head><body><ul class="treeview"><li class="expandable">Item 1<ul><li>Sub-item 1</li><li>Sub-item 2</li><li>Sub-item 3</li></ul></li><li class="expandable">Item 2<ul><li>Sub-item 1</li><li>Sub-item 2</li></ul></li><li>Item 3</li></ul><script>var expandableItems = document.querySelectorAll('.expandable');for (var i = 0; i < expandableItems.length; i++) {expandableItems[i].addEventListener('click', function() {var submenu = this.querySelector('ul');if (submenu.style.display === "block") {submenu.style.display = "none";this.classList.remove('collapsible');this.classList.add('expandable');} else {submenu.style.display = "block";this.classList.remove('expandable');this.classList.add('collapsible');}});}</script></body></html>```上述示例中，我们首先在`<ul>`元素上添加了一个名为`treeview`的类。

树形菜单导航源代码

简洁的多级树形导航菜单1、xhtml部分<ul id="menuList"><li class="menubar"><a href="#" id="productsActuator" class="actuator">我的收藏夹</a><ul id="productsMenu" class="menu"><li><a href="#" id="newPhonesActuator" class="actuator">个人网站</a> <ul id="newPhonesMenu" class="submenu"><li><a href="/">网页代码库</a></li><li><a href="/">网页设计师</a></li><li><a href="/">JunChen博客</a></li> <li><a href="/andy/">毅博客</a></li></ul></li><li><a href="#" id="compareActuator" class="actuator">国外网站</a><ul id="compareMenu" class="submenu"><li><a href="/">A List Apart</a></li><li><a href="/">CSS禅意花园</a></li><li><a href="/">456 Berea Street</a></li><li><a href="/">W3C网站</a></li></ul></li></ul></li></ul>2、css部分#menuList {margin: 0px;padding: 10px 0px 10px 15px;border: 1px solid #CCC;width: 203px;background-color: #EEE;color: #000;font-family: verdana, helvetica, arial, sans-serif; }li.menubar {font-size: 12px;line-height: 1.8em;list-style: none;}.menu, .submenu {display: none;margin-left: 15px;padding: 0px;}.menu li, .submenu li {list-style: none;}#menuList a {background-color: transparent;color: #000;font-size: 12px;margin-left: 15px;text-decoration: none;}#menuList a:hover {text-decoration: underline;}3、Javascript部分if (!document.getElementById) {document.getElementById = function() { return null; } }function initializeMenu(menuId, actuatorId) {var menu = document.getElementById(menuId);var actuator = document.getElementById(actuatorId);if (menu == null || actuator == null) return;actuator.onclick = function() {var display = menu.style.display;menu.style.display = (display == "block") ? "none" : "block"; return false;}}window.onload = function() {initializeMenu("productsMenu", "productsActuator");initializeMenu("newPhonesMenu", "newPhonesActuator");initializeMenu("compareMenu", "compareActuator");}简洁的双级导航菜单1、xhtml部分源代码：<ul id="butong-nav"><li><a href="#">Home</a></li><li><a href="#">About</a><ul><li><a href="#">History</a></li><li><a href="#">Team</a></li><li><a href="#">Offices</a></li></ul></li><li><a href="#">Services</a><ul><li><a href="#">Web Design</a></li><li><a href="#">Internet Marketing</a></li><li><a href="#">Hosting</a></li><li><a href="#">Domain Names</a></li><li><a href="#">Broadband</a></li></ul></li><li><a href="#">Contact Us</a><ul><li><a href="#">United Kingdom</a></li> <li><a href="#">France</a></li><li><a href="#">USA</a></li><li><a href="#">Australia</a></li></ul></li></ul>2、css部分源代码#butong-nav, #butong-nav ul {font: normal 11px verdana;margin: 0;padding: 0;list-style: none;width: 150px;border-bottom: 1px solid #CCC;}#butong-nav li {position: relative;}#butong-nav ul {position: absolute;left: 149px;top: 0;display: none;}#butong-nav li a {display: block;text-decoration: none;color: #777;background: #fff;padding: 5px;border: 1px solid #ccc;border-bottom: 0;}#butong-nav li a:hover {text-decoration: underline;}* html #butong-nav li {float: left;height: 1%;}* html #butong-nav li a {height: 1%;}#butong-nav li:hover ul, #butong-nav li.over ul {display: block;}3、Javascript部分源代码startList = function() {if (document.all && document.getElementById) {navRoot = document.getElementById("butong-nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName == "LI") {node.onmouseover = function() {this.className += "over";}node.onmouseout = function() {this.className = this.className.replace("over", ""); }}}}}window.onload = startList;。

js脚本实现树形菜单

var on_img="/member/pic/ass04.gif";//打开时图片
var off_img="/member/pic/ass03.gif";//隐藏时图片
var obj=document.getElementById('c_'+id);
</tbody>
<tbody>
<tr>
<td class="leftmenu1"> <a style="cursor: pointer" onclick="Show(4,img4)"><img src="/member/pic/ass03.gif" width="16" height="16" align="absmiddle" id="img4"/><span class="ft_white">应聘管理</span></a></td></tr>
}
window.onload = function a()
{
var curShow = readCookie('curShow');
var totalShow = 5; //自己修改一共有多少个二级分类
if(curShow!=''&&curShow!=null)
{
for(i=1;i<=totalShow;i++)
<html xmlns="/1999/xhtml">

JS实现无限级网页折叠菜单（类似树形菜单）效果代码

JS实现⽆限级⽹页折叠菜单（类似树形菜单）效果代码本⽂实例讲述了JS实现⽆限级⽹页折叠菜单(类似树形菜单)效果代码。

分享给⼤家供⼤家参考。

具体如下：这是⼀款超不错的⽹页折叠菜单，采⽤JavaScript实现。

折叠菜单是⼤家⽐较常见到的⼀种菜单形式，可⼴泛应⽤于管理系统、后台左侧、产品列表中，本折叠菜单有点树形菜单的味道，相信“⽆限级”会满⾜你的要求。

运⾏效果截图如下：在线演⽰地址如下：具体代码如下：<html><head><title>⽆限级折叠菜单JS版</title><style></style></head><body><div id="menu"><h3>⽆限级折叠菜单JavaScript版</h3><ul><li><em></em><a href='javascript:void(0);'>菜单_1_1</a><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_3_1</a><ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_1_2</a><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_3_1</a><ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a> <ul><li><em></em><a href='javascript:void(0);'>菜单_4_1</a><ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li><li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a> <ul><li><a href='javascript:void(0);'>菜单_5_1</a></li><li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li></ul></li></ul></li></ul></li></ul></li></ul><script type="text/javascript">(function(e){for(var _obj=document.getElementById(e.id).getElementsByTagName(e.tag),i=-1,em;em=_obj[++i];){ em.onclick = function(){ //onmouseovervar ul = this.nextSibling;if(!ul){return false;}ul = ul.nextSibling; if(!ul){return false;}if(e.tag != 'a'){ ul = ul.nextSibling; if(!ul){return false;} } //a 标签控制隐藏或删除该⾏for(var _li=this.parentNode.parentNode.childNodes,n=-1,li;li=_li[++n];){if(li.tagName=="LI"){for(var _ul=li.childNodes,t=-1,$ul;$ul=_ul[++t];){switch($ul.tagName){case "UL":$ul.className = $ul!=ul?"" : ul.className?"":"off";break;case "EM":$ul.className = $ul!=this?"" : this.className?"":"off";break;}}}}}}})({id:'menu',tag:'em'});</script></body></html>希望本⽂所述对⼤家的JavaScript程序设计有所帮助。

使用js简单实现了tree树菜单

使⽤js简单实现了tree树菜单复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>tree</title><link href="css/style.css" rel="stylesheet" type="text/css" /><style type="text/css">.node ul{margin-left:20px;}.node .node{display:none;}.node .tree{height:24px;line-height:24px;}.ce_ceng_close{background:url(images/cd_zd1.png) left center no-repeat;padding-left: 15px;}.ce_ceng_open{background:url(images/cd_zd.png) left center no-repeat;}</style><script type="text/javascript" src="/jquery-1.10.2.min.js"></script></head><body><div class="cd_zj_l"><div class="cd_title">⽬录导航</div><div class="cv_fcv node"><div class="tree">哲学、宗教</div><ul class="node"><li><div class="tree">哲学伦理</div><ul class="node"><li><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div></li><div style="clear:both"></div></ul></li><div style="clear:both"></div></ul><div class="tree">哲学、宗教</div><ul class="node"><li><div class="tree">哲学伦理</div><ul class="node"><li><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div><div class="tree">马克思主义哲学</div></li></ul></li></ul></div></div><script type="text/javascript">$(".tree").each(function(index, element) {if($(this).next(".node").length>0){$(this).addClass("ce_ceng_close");}});$(".tree").click(function(e){var ul = $(this).next(".node");if(ul.css("display")=="none"){ul.slideDown();$(this).addClass("ce_ceng_open");ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); }else{ul.slideUp();$(this).removeClass("ce_ceng_open");ul.find(".node").slideUp();ul.find(".ce_ceng_close").removeClass("ce_ceng_open"); }});</script></body></html>使⽤js简单实现了树菜单！相信⾃⼰你⼀定可以实现的更好！实现的效果图。

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

<html><head><style>#d1{width:200;height:400;background-color:#cccccc;border:2px solid black;left:30;top:30;position:absolute;}#d1_head{height:30;background-color:blue;color:white;font-size:20pt;}#d1_body{background-color:#cccccc;}.list li{list-style-type:none}.image image:向下.png;</style><script>function doAction(index){var obj = document.getElementById('u' + index);if(obj.style.display == 'none'){obj.style.display = 'block';if(index=='1'){document.getElementById("img1").src='向下.png';}else{document.getElementById("img2").src='向下.png';}}else{obj.style.display = 'none';if(index=='1'){document.getElementById("img1").src='向右.png';}else{document.getElementById("img2").src='向右.png';}}}function test(){var obj = document.getElementById('l1');alert(obj.innerHTML);}</script></head><body style="font-size:20pt;"><div id="d1"><div id="d1_head">树形菜单</div><ul class="list"><li><span onclick="doAction(1);"><img src="向右.png" id="img1"/>羽绒专区</span> </li><ul style="display:none;" id="u1"><li><a href="#">羽绒服</a></li><li><a href="#">羽绒夹克</a></li></ul><li><span onclick="doAction(2);"><img src="向右.png" id="img2"/>靴子专区</span> </li><ul style="display:none;" id="u2"><li><a href="#">雪地靴</a></li><li><a href="#">登山靴</a></li></ul></ul></div></div></body></html>下载两个指向不同的小图标用于区分。

Ecology6.0二次开发-树形图

Ecol ogy二次开发树形图开发简介以上是Ecology产品中最典型的框架图之一，其中框架的左侧为一个树形导航栏，框架的右边为内容区。

以上框架一共由4个JSP组成，下面的表格分别对这四个JSP做了简要说明。

开发示例下图是个这个开发示例的效果图，下面的开发示例代码都是为了个效果而准备的！注：开发示例做完后，请访问“”页面。

注：在Ecology服务器端的文件夹中，添加了一个treeframe-cst的文件夹，以下所提到的jsp都是存在此文件夹中。

<%@ page language="java" contentType="text/html; charset=GBK" %><%@ page import="" %><%@ include file="/systeminfo/" %><HTML><HEAD><LINK href="/css/" type=text/css rel=STYLESHEET></HEAD><body><TABLE class=viewform width=100% id=oTable1 height=100%><COLGROUP><COL width="50%"><COL width=5><COL width="50%"><TBODY><tr><td height=100% id=oTd1 name=oTd1 width=30%><IFRAME name=leftframe id=leftframe src=" " width="100%" height="100%" frameborder=no scrolling=no>浏览器不支持嵌入式框架，或被配置为不显示嵌入式框架。

超全的JS树形菜单源代码共享

树形菜单是很常用的效果，常用在管理软件当中，但是一套树形菜单已经不能满足需求，所以如果能有一套比较全面的树形菜单JS特效代码，将会非常方便，下面懒人萱将超全的JS树形菜单共享出来，相信你一定用得上。

一共包括八种，下面就一一介绍：
1、不同表现方式的JS树形菜单（如图所示）
2、复选框式的JS树形菜单（如图所示）
左图为只可以选择单节点，右图为在选择子节点的同时选择父节点
3、可以重新排列节点并且具有拖放功能的js树形菜单（如图所示）
4、带有提示框的js树形菜单（如图所示）
如果想打开或关闭某个节点，将会弹出一个警告框；如果选中或取消某个菜单前的复选框，也会有相应的文字提示。

这个功能目前还没有想到会在什么情况下使用，但是可以先了解一下。

5、将div菜单列表转换成树的js树形菜单（如图所示）
左图为div菜单列表，右图为转换后的树。

6、可以异步加载数据的js树形菜单
7、可以添加和删除菜单的js树形菜单（如图所示）
包括添加子菜单和同级菜单两种。

8、展开关闭节点的js树形菜单（如图所示）
此JS树形菜单已做过测试，可以兼容现在的所有主流浏览器，所以你可以放心使用这个JS树形菜单。

里边的功能很多，可能大家暂时不会都用到，但是说不定以后会用到呢，所以要好好收藏哦！。

jsp生成树形菜单

JSP生成树形菜单(1)12 <c:set var="treeName" value="tree.model"/>3 <c:if test="${empty sessionScope[treeName]}">45<jsp:useBean id="tree"class="com.jenkov.prizetags.tree.impl.Tree"scope="page"/>67<jsp:useBean id="root"class="com.jenkov.prizetags.tree.impl.TreeNode"/>8<jsp:setProperty name="root" property="id"value="rootId"/>9<jsp:setProperty name="root" property="name" value="后台管理操作菜单"/>10<jsp:setProperty name="root" property="type"value="root"/>1112<jsp:useBean id="articleAdmins"class="com.jenkov.prizetags.tree.impl.TreeNode"/>13<jsp:setProperty name="articleAdmins" property="id"value="articleAdminsId"/>14<jsp:setProperty name="articleAdmins"property="name" value="文章发布"/>15<jsp:setProperty name="articleAdmins"property="type" value="functions"/>1617<jsp:useBean id="userAdmins"class="com.jenkov.prizetags.tree.impl.TreeNode"/>18<jsp:setProperty name="userAdmins" property="id" value="userAdminsId"/>19<jsp:setProperty name="userAdmins"property="name" value="用户管理"/>20<jsp:setProperty name="userAdmins" property="type" value="functions"/>2122<jsp:useBean id="addArticle"class="com.jenkov.prizetags.tree.impl.TreeNode"/>23<jsp:setProperty name="addArticle" property="id" value="addArticleId"/>24<jsp:setProperty name="addArticle" property="name" value="增加文章"/>25<jsp:setProperty name="addArticle" property="type"value="function"/>2627<jsp:useBean id="updateArticle"class="com.jenkov.prizetags.tree.impl.TreeNode"/>28<jsp:setProperty name="updateArticle" property="id" value="updateArticleId"/>29<jsp:setProperty name="updateArticle"property="name" value="修改与删除文章"/>30<jsp:setProperty name="updateArticle"property="type" value="function"/>3132<jsp:useBean id="channelAdmin"class="com.jenkov.prizetags.tree.impl.TreeNode"/>33<jsp:setProperty name="channelAdmin" property="id" value="channelAdminId"/>34<jsp:setProperty name="channelAdmin"property="name" value="栏目管理"/>35<jsp:setProperty name="channelAdmin"property="type" value="function"/>3637<c:if test="${sessionScope.adminUserRole==2}"> 38<jsp:useBean id="userAdmin"class="com.jenkov.prizetags.tree.impl.TreeNode"/>39<jsp:setProperty name="userAdmin" property="id" value="userAdminId"/>40<jsp:setProperty name="userAdmin" property="name" value="用户管理"/>41<jsp:setProperty name="userAdmin" property="type" value="function"/>42<%userAdmin.setParent(userAdmins);%>43</c:if>4445<jsp:useBean id="userPowerAdmin"class="com.jenkov.prizetags.tree.impl.TreeNode"/>46<jsp:setProperty name="userPowerAdmin"property="id" value="userPowerAdminId"/>47<jsp:setProperty name="userPowerAdmin"property="name" value="修改当前用户密码"/>48<jsp:setProperty name="userPowerAdmin"property="type" value="function"/>4950<jsp:useBean id="exitSys"class="com.jenkov.prizetags.tree.impl.TreeNode"/>51<jsp:setProperty name="exitSys" property="id"value="exitSysId"/>52<jsp:setProperty name="exitSys" property="name" value="退出系统"/>53<jsp:setProperty name="exitSys" property="type" value="function"/>5455<%addArticle.setParent(articleAdmins);56 updateArticle.setParent(articleAdmins);57 userPowerAdmin.setParent(userAdmins);58 articleAdmins.setParent(root);59 channelAdmin.setParent(root);60 userAdmins.setParent(root);61 exitSys.setParent(root);62 tree.setRoot(root); %>6364<c:set var="tree.model" value="${tree}"scope="session"/>65 </c:if>。

用JS做的简单的可折叠的两级树形菜单

⽤JS做的简单的可折叠的两级树形菜单复制代码代码如下:<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><hrad><metahttp-equiv="content-type"content="text/html;charset=utf-8"><title>可折叠的两级菜单</title><styletype="text/css"></style><scriptlanguage="javascript">window.onload=function(){varlistUL=document.getElementById("listUL");varolist=listUL.childNodes;varoa=0;for(var i = 0; i < olist.length; i++) {if(olist[i].tagName=="LI"&&olist[i].getElementsByTagName("ul")[0]){ oa=olist[i];oa.onclick=change;}}functionchange(){varos=this.getElementsByTagName("ul")[0];if(os.className=="myHide")os.className="myShow";elseos.className="myHide";}}</script></hrad><body><divid="navigation"><ulid="listUL"><li><divclass="txt">Home</div></li><li><divclass="txt">news</div><ulclass="myHide"><li><ahref="#">lastest news</a></li><li><ahref="#">all news</a></li></ul></li><li><divclass="txt">sports</div><ulclass="myHide"><li><ahref="#">lastest news</a></li><li><ahref="#">all news</a></li></ul></li><li><divclass="txt">weather</div><ulclass="myHide"><li><ahref="#">lastest news</a></li> <li><ahref="#">all news</a></li></ul></li></ul></div></body></html>。

js树形菜单递归函数

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` 属性中。

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

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

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

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

jsp制作动态树型菜单

jsp制作动态树型菜单<%@ page contentType="text/html;charset=GBK" %><%@ page import="java.sql.*"%><%@ page import="java.util.*" %><%@ page session="true" %><jsp:useBean id="db" scope="page" class="oa.db.opendb" /> 连接数据库<html><head><title></title><SCRIPT language=JavaScript src="tool/xtree.js"></SCRIPT><SCRIPT language=JavaScript></script><link href="css/default.css" rel="stylesheet" type="text/css"><style type="text/css"></style><style type="text/css"></style></head><body bgcolor="#DEF3CE" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" > <br><table width="100%" border="0" cellspacing="0" cellpadding="0"><TR width="100%"><TD ><strong><font color="black">     ERP-OA??</font></strong></TD></TR><TR width="100%"><TD > </TD></TR><%String main_id,aaa,aaaa,aaaaa;String sql="select * from main_menu "; //第一层菜单表ResultSet rs=db.execQuery(sql);if(rs!=null){int i=1;while(rs.next()){main_id=rs.getString("id");aaa="KB"+i+"Parent";aaaa="'KB"+i+"'";aaaaa="KB"+i+"Child";%><TR width="100%"><TD class="a5"> <DIV class=parent id=<%=aaa%> width="100%"><A href="" target="show" onclick="expandIt('KB<%=i%>');return false">    <IMG align=absMiddle border=0height=18 src="images/xtarrow.gif" width=20></A><span class="a4"><font size=2 color="#000000"><strong><%=rs.getString("menu_name")%></strong></font></span></DIV></TD> </TR><TR width="100%"><TD class="a5"> <DIV class=child id=<%=aaaaa%> width="100%"><%String sqlchild="select * from sub_menu where main_menu_id='"+main_id+"'"; //第二层菜单表ResultSet rschild=db.execQuery(sqlchild);if(rschild!=null){int j=1;while(rschild.next()) {%>       <IMG align=absMiddle border=0 height=18 src="images/xtsub.gif" width=18> //节点图片<a href=<%=rschild.getString("sub_link")%> target="show"><font size=2 ><%=rschild.getString("sub_name")%></font></a><BR><%j++;}}else{%>---------<BR><%}rschild.close();%></DIV></TD></TR><%i++;}}else{%>----<%}rs.close();%></table></body></html>菜单数据库如下main_menu表id 自动编号menu_name 字符第一层菜单名称menu_link 字符连接menu_memo 字符菜单说明sub_menu表id 自动编号main_menu_id 字符对应main_menu表中的id sub_name 字符第二层菜单名称sub_link 字符菜单连接文件名称xtree.jsscores = new Array(20);var numTotal=0;NS4 = (yers) ? 1 : 0;IE4 = (document.all) ? 1 : 0;ver4 = (NS4 || IE4) ? 1 : 0;if (ver4) {with (document) {write("<STYLE TYPE='text/css'>");if (NS4) {write(".parent {position:absolute; visibility:visible}");write(".child {position:absolute; visibility:visible}");write(".regular {position:absolute; visibility:visible}") }else {write(".child {display:none}")}write("</STYLE>");}}function getIndex(el) {ind = null;for (i=0; i<yers.length; i++) {whichEl = yers[i];if (whichEl.id == el) {ind = i;break;}}return ind;}function arrange() {nextY = yers[firstInd].pageY +yers[firstInd].document.height;for (i=firstInd+1; i<yers.length; i++) {whichEl = yers[i];if (whichEl.visibility != "hide") {whichEl.pageY = nextY;nextY += whichEl.document.height;}}}function initIt(){if (!ver4) return;if (NS4) {for (i=0; i<yers.length; i++) {whichEl = yers[i];if (whichEl.id.indexOf("Child") != -1)whichEl.visibility = "hide";}arrange();}else {divColl = document.all.tags("DIV");for (i=0; i<divColl.length; i++) {whichEl = divColl(i);if (whichEl.className == "child") whichEl.style.display = "none";}}}function expandIt(el) {if (!ver4) return;if (IE4) {whichEl1 = eval(el + "Child");for(i=1;i<=numTotal;i++){whichEl = eval(scores[i] + "Child");if(whichEl!=whichEl1) {whichEl.style.display = "none";}}whichEl1 = eval(el + "Child");if (whichEl1.style.display == "none") {whichEl1.style.display = "block";} else {whichEl1.style.display = "none";}}else {whichEl = eval("document." + el + "Child");for(i=1;i<=numTotal;i++){whichEl = eval("document." + scores[i] + "Child");if(whichEl!=whichEl1) {whichEl.visibility = "hide";}}if (whichEl.visibility == "hide") {whichEl.visibility = "show";}else {whichEl.visibility = "hide";}arrange();}}onload = initIt;优惠促销打折网5号仓库。

jsp页面树形结构的生成

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%><html><head><title>派发树</title><link rel="stylesheet" type="text/css"href="${pageContext.request.contextPath}/ext/css/ext-all.css" /> <script type="text/javascript"src="${pageContext.request.contextPath}/ext/ext-base.js"></script> <script type="text/javascript"src="${pageContext.request.contextPath}/ext/ext-all.js"></script> </head><script type="text/javascript">window.returnValue = "";var path = "${pageContext.request.contextPath}/ext/images/default/";var data = ${treeJson}var srcElement = null;var dstElement = null;f unction initTree(p,o) {var _icon = "";if(o.type == 'person') {_icon = path + 'person.png';}var node=new Ext.tree.TreeNode({id:o.id,//根节点idtext:o.text,type:o.type,icon:_icon});p.appendChild(node);if(o.childs.length > 0) {for(var i = 0; i < o.childs.length ; i ++) {initTree(node,o.childs[i]);}}node.on('click',function(n){srcElement = node;});node.on('dblclick',function(n){addElement();});}var dstRoot = null;var srcRoot = null;Ext.onReady(function(){Ext.BLANK_IMAGE_URL ="${pageContext.request.contextPath}/ext/images/default/s.gif";//定义树的跟节点srcRoot=new Ext.tree.TreeNode({id:"root",//根节点idtext:"我是树根"});for(var i = 0 ; i < data.length; i ++) {initTree(srcRoot,data[i],"");}//生成树形面板var tree=new Ext.tree.TreePanel({renderTo:"show",root:srcRoot,//定位到根节点animate:true,//开启动画效果enableDD:false,//不允许子节点拖动border:false,//没有边框rootVisible:false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性});dstRoot = new Ext.tree.TreeNode({id:"root",//根节点idtext:"我是树根"});var selectedTree = new Ext.tree.TreePanel({renderTo:"selectedTree",root:dstRoot,//定位到根节点animate:true,//开启动画效果enableDD:false,//不允许子节点拖动border:false,//没有边框rootVisible:false//设为false将隐藏根节点，很多情况下，我们选择隐藏根节点增加美观性});})function addElement() {if(srcElement == null) return;var eles = dstRoot.childNodes;for(var i = 0; i <eles.length; i ++) {if(eles[i].id == srcElement.id) return;}if(eles.length>0){alert("只能派发到一个组或者一个人");return;}var _icon = "";if(srcElement.attributes.type == 'person') { _icon = path + 'person.png';}var node=new Ext.tree.TreeNode({id:srcElement.id,//根节点idtext:srcElement.text,type:srcElement.attributes.type,icon:_icon});node.on('click',function(n){dstElement = node;});node.on('dblclick',function(n){delElement();});dstRoot.appendChild(node);}function delElement() {if(dstElement != null)dstRoot.removeChild(dstElement);}function addAll() {var eles = srcRoot.childNodes;for(var i = 0; i < eles.length; i ++) {srcElement = eles[i];addElement();}}function delAll() {var eles = dstRoot.childNodes;for(var i = eles.length - 1; i >= 0 ; i --) {dstElement = eles[i];delElement();}}function finish() {var eles = dstRoot.childNodes;var result = "";var connStr = "";for(var i = eles.length - 1; i >= 0 ; i --) {result += connStr;connStr = ",";result = result + eles[i].id.split("-")[0];result = result + "#" + eles[i].text + "#" + eles[i].attributes.type;}returnValue = result;window.close();}</script><body><div id="show"style="z-index: 1000px; width: 240px; overflow: auto; height: 400px; left: 50px; top: 30px; border: 1px solid #CCCCCC; position: absolute;"></div><div id="tools"style="z-index: 1000px; width: 90px; overflow: auto; height: 400px; left: 300px; top: 30px; border: 1px solid #CCCCCC; position: absolute;"><input type="button" value=" 增加 "style="width: 80px; top: 150px; position: absolute;"onClick="addElement()"><input type="button" value=" 删除 "style="width: 80px; top: 200px; position: absolute;"onClick="delElement()"><input type="button" value=" 全删 "style="width: 80px; top: 250px; position: absolute;"onClick="delAll()"></div><div id="selectedTree"style="z-index: 1000px; width: 240px; overflow: auto; height: 400px; left: 400px; top: 30px; border: 1px solid #CCCCCC; position: absolute;"></div> <input type="button" value=" 确定 "style="left: 270; top: 450px; position: absolute;"onClick="finish();" /><button style="left:375 ; top: 450px; position: absolute;"onClick="window.close();"> 取消 </button></body></html>。

Jsp实现树形结构

Jsp实现树形结构1。

原理简介dtree是一个免费的javascript脚本，只需定义有限的几个参数，就可以做出漂亮的树型菜单。

js树形菜单：Js table实现的树形导航菜单效果源代码

</tr> <tr> <tdstyle=\"PADDING-LEFT:40px\"height=\"23\"> <imgheight=\"7\"src=\"images/bit06.g\"width=\"8\" [Page] align=\"absMiddle\"> <atitle=\"文件盒\"href=\"\"target=\"_parent\"> 文件盒</a> </td> </tr> <tr> <tdbackgroundheight=\"3\"></td> </tr> <tr> <tdstyle=\"PADDING-LEFT:40px\"height=\"23\"> [Page] <imgheight=\"7\"src=\"images/bit06.g\"width=\"8\" align=\"absMiddle\"> <atitle=\"文件柜\"href=\"\"target=\"_parent\"> 文件柜</a>
<body>
<tablewidth=\"200\"height=\"250\"border=\"0\"align=\"center\" cellpadding=\"0\"cellspacing=\"0\"> <tr> <tdheight=\"38\"> <imgheight=\"38\"src=\"images/leftlist_head.jpg\"width=\"200\"/> </td> </tr> <tr> <tdalign=\"center\"valign=\"top\"background=\"images/leftlist_bg.jpg\"> <scriptlanguage=\"javascript\"id=\"clientEventHandlersJS\"> <!-varnumber=8;

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

JS实现的树形菜单

JavaScript源程序--树形菜单

js构造树形菜单

JavaScript生成树形菜单（递归算法）

JSP自定义标签(一) 树形下拉选择菜单

html js树形折叠菜单实例

树形菜单导航源代码

js脚本实现树形菜单

JS实现无限级网页折叠菜单（类似树形菜单）效果代码

使用js简单实现了tree树菜单

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

Ecology6.0二次开发-树形图

超全的JS树形菜单源代码共享

jsp生成树形菜单

用JS做的简单的可折叠的两级树形菜单

js树形菜单递归函数

jsp制作动态树型菜单

jsp页面树形结构的生成

Jsp实现树形结构

js树形菜单：Js table实现的树形导航菜单效 果源代码

js树形菜单：Js table实现的树形导航菜单效果源代码