自己动手生成菜单树

最新推荐文章于 2022-01-14 21:29:31 发布
最新推荐文章于 2022-01-14 21:29:31 发布
阅读量187 收藏
点赞数
文章标签： C C++ C# F#
描述：用js从文件读取配置信息如下-----

[list]
1,0,武汉大学
2,1,机械学院
3,1,软件学院
4,1,测绘学院
5,2,汽车专业
7,3,C++专业
8,3,WEB专业
9,1,经济学院
12,4,工程测量专业
13,9,1专业
14,9,2专业
[/list]

然后生成一个菜单树，

可以任意添加和删除节点

最后可以把它保存到文件中

代码如下： 

<html>
<head>
	<title>生成树</title>

<script language="javascript"> 
//构造一个文件流对象	
var fso = new ActiveXObject("Scripting.FileSystemObject"); 
//读取文件
var f1 = fso.OpenTextFile("1.txt",1,true); 
//所有节点集合
var TreeNodes = new Array();
//节点和节点间的关系集合
var NodeLink = new Array();
//节点展开与否集合
var isExpand = new Array();

var imgArray = new Array();
imgArray[0] = ["a.gif","b.gif"];
imgArray[1] = ["b.gif","a.gif"];
imgArray[2] = ["tree_-_mid.gif","tree_+_mid.gif"];
imgArray[3] = ["tree_+_mid.gif","tree_-_mid.gif"];
imgArray[4] = ["tree_+_end.gif","tree_-_end.gif"];
imgArray[5] = ["tree_-_end.gif","tree_+_end.gif"];
imgArray[6] = ["tree_mid","tree_-_mid.gif"];
imgArray[7] = ["tree_end","tree_-_end.gif"];
//页面加载执行的方法
function _load(){
var i = 0;
//读取文件，直到到达流结束
while (!f1.AtEndOfStream) 
{ 

//读取一行	
var node = f1.Readline().toString();

//根据规则拆分
var abc = node.split(',');
//加入到节点集合
TreeNodes[i] = abc;
i++;

} 
//关闭流
f1.close(); 


maderelation();
//显示根节点，默认为第一个节点
var node_0 = getById(1);
//判断有子节点就显示+号，否则显示减号
if(hasChild(node_0[0])){
	var str = "<span id='span"+node_0[0]+"'><img id='img_"+node_0[0]+"' onclick=_click('"+node_0[0]+"',1) src='a.gif'><a id='"+node_0[0]+"' type="+1+" style='cursor:hand'> "+node_0[2]+"</a></span> ";
	document.write(str);
}else{
	var str = "<span id='span"+node_0[0]+"'><img id='img_"+node_0[0]+"' onclick=_click('"+node_0[0]+"',1) src='b.gif'><a id='"+node_0[0]+"' type="+1+" style='cursor:hand' >"+node_0[2]+"</a></span> ";
	document.write(str);
}

//设置根节点为没有展开的节点
var _e = [1,false];
//加入到节点展开与否的集合中;
isExpand[1] = _e;
}
//构造节点与节点关系的集合
//节点id为下标，值为节点的子节点
function maderelation(){
NodeLink = new Array();	
for(var m = 0 ; m<TreeNodes.length ; m++){
		var  nodes = new Array();
		var j = 0;
		var f_node = TreeNodes[m];
		if(f_node==null)continue;
    for(var n = 0 ; n < TreeNodes.length ; n++){
       var node = TreeNodes[n];
	   if(node==null)continue;
       //node[i]即是fid,m即是节点id，如果fid==节点的id 就是这个节点的子节点
       if(node[1] == f_node[0] ){
       	//加入子节点集合
					nodes[j] = node;
					j++;  		
       	}
    }
    //加入到关系集合中
    NodeLink[f_node[0]] = nodes;
}
}
//用于点击菜单，判断是否展开还是收起
//id---节点id；num---代表展开的层级，用于显示缩进
function _click(id,num){
	//找到节点是否展开的对象，如果没有找到则新建一个，标记为已展开，
		var _expand = isExpand[id];

		if(_expand != null){
			if(_expand[1] == false){
				_expand[1] = true;
				_Expand(id,num);	
			}else{
				_expand[1] = false;
				_Hide(id);	
			}
		}else{
			_expand = [id,true];
			_Expand(id,num);
		}
		isExpand[id] = _expand;	
}

//展开子目录
function _Expand(id,num){
	//根据id获得当前节点的对象
	var f_span = document.getElementById("span"+id);
	//找到所有子节点集合
	var c_nodes = NodeLink[id];
	if(c_nodes==null)return false;
	for(var o = 0 ; o < c_nodes.length ; o++){
		// 构建子节点
			var c_node = c_nodes[o];
			if(c_node==null)continue;
			var c_span = document.createElement("span");
			c_span.id = "span"+c_node[0];
			var c_str = "<br>";
			//显示缩进
			var jc = getExIndex(id);
			for(var i = 0 ;i<=jc; i++){
				if(i != jc){
					c_str +=" "
					//c_str +="<img src='tree_f.gif'>";
				}else{
					if(hasChild(c_node[0])){
						if(o!=c_nodes.length-1)	c_str+="<img id='img_"+c_node[0]+"' onclick=_click('"+c_node[0]+"',"+s+") src='tree_+_mid.gif'/>"
						else c_str+="<img id='img_"+c_node[0]+"' onclick=_click('"+c_node[0]+"',"+s+") src='tree_+_end.gif'>"
					}else{
						if(o!=c_nodes.length-1)	c_str+="<img id='img_"+c_node[0]+"' onclick=_click('"+c_node[0]+"',"+s+") src='tree_mid.gif'/>"
						else c_str+="<img id='img_"+c_node[0]+"' onclick=_click('"+c_node[0]+"',"+s+") src='tree_end.gif'>"
					}
				}
			}

			var s = jc+1;


			c_str+="<a id='"+c_node[0]+"' style='cursor:hand' type="+jc+" >"+c_node[2]+"</a>";
			c_span.innerHTML = c_str;
			//加入到本节点下
			f_span.appendChild(c_span);
	}
	var img_tag = document.getElementById("img_"+id);
	var str = img_tag.src;
	str = getfxImg(str.toString());
	img_tag.src = str;	

}
//隐藏子目录
function _Hide(id){
	//根据id获得当前节点的对象
	var f_span = document.getElementById("span"+id);
	//找到所有子节点集合
	var c_nodes = NodeLink[id];

	if(c_nodes==null)return false;

	for(var o = 0 ; o < c_nodes.length ; o++){
			var c_node = c_nodes[o];
			if(c_node==null)return;
			var _expand = isExpand[c_node[0]];
			if(_expand!=null&&_expand[1]==true){
				_expand[1] = false;
		  }
			var c_span = document.getElementById("span"+c_node[0]);
			if(c_span == null)continue;
			f_span.removeChild(c_span);
	}
	var img_tag = document.getElementById("img_"+id);
	var str = img_tag.src;
	str = getfxImg(str.toString());
	img_tag.src = str;	
}	
_load();

function getIndex(id){
		var node = getById(id);	
		var nodes = NodeLink[node[1]];
		if(nodes==null)return 0;
		for(var i = 0 ; i< nodes.length ; i++){
			var temp = nodes[i];
			if(temp[0] == node[0])
				return i;	
		}
		return 0;
}

//通过id拿到节点
function getById(id){
	for(var i = 0 ;i<TreeNodes.length ; i++){
		var node = TreeNodes[i];
		if(node==null)continue;
		else{
			if(node[0]==id){
				return node;
			}
		}	
 }
}
//通过id删除节点
function removeById(id){
	for(var i = 0 ;i<TreeNodes.length ; i++){
		var node = TreeNodes[i];
		if(node==null)continue;
		else{
			if(node[0]==id){
				TreeNodes[i] = null;
			}
		}	
 }
}
//检查是否存在孩子节点
function hasChild(id){
	var c_nodes = NodeLink[id];
	if(c_nodes != null && c_nodes.length >0 ){
		for(var i = 0 ;i<c_nodes.length;i++){
			var temp = c_nodes[i];
			if(temp!=null&&temp.length>0) return true;
		}
		return false;	
	}	
	else{
		return false;	
	}

}	
//用于记录点击右键时的tag的id
var event_id = "";
//当点击鼠标右键
function document.oncontextmenu() {
	var id= event.srcElement.id;
	event_id = id;
	if(checkId(id)==true){
		d.style.visibility = "visible";
		d.style.left = event.clientX+10;
		d.style.top = event.clientY+10;
		return false;
	}else return true;
}
//用于隐藏点击右键产生的div
function document.onclick() {
	d.style.visibility = "hidden";
}
//用于判断事件id是否为树的某个节点
function checkId(id){
	for(var i = 0 ; i<TreeNodes.length; i++){
		var node = TreeNodes[i];
		if(node==null)continue;
		if(node[0] == id) return true;	
	}	
	return false;
}
//得到最大的节点ID
function maxId(){
	var max_id = 0;
	for(var i = 0 ; i<TreeNodes.length ; i++){
		var node = TreeNodes[i];
		if(node!=null&&(parseInt(node[0]))>parseInt(max_id)){
			max_id = node[0];	
		}
	}	
	return parseInt(max_id);
}

//点击增加事件
function right_add(){
	var f_id = document.getElementById('fid');
	var f_name = document.getElementById('fname');
	var c_id = document.getElementById('cid');
	var c_name = document.getElementById('cname');
	var id = "";
	if(event_id == ""){return false;}
	else {
		id = event_id;
		event_id = "";
	}
	var node = getById(id);
	f_id.value=node[0];
	f_name.value=node[2];
	c_id.value = maxId()+1;
	document.getElementById("add").style.display="";
}
//点击删除事件
function rigth_delete(){
	var id = "";
	if(event_id == ""){return false;}
	else {
		id = event_id;
		event_id = "";
	}
	var node = getById(id);
	var f_id = node[1];
	var fspan = document.getElementById("span"+f_id);
	var cspan = document.getElementById("span"+node[0]);
	fspan.removeChild(cspan);
	removeById(id);
	var c_nodes = NodeLink[f_id];
	for(var i = 0 ; i < c_nodes.length ; i++){
		var node_c = c_nodes[i];
		if(node_c[0]==id)
			c_nodes[i] = null;
			break;
	}

	NodeLink[f_id] = c_nodes;

	var f = fso.OpenTextFile("1.txt",2,true); 
		for(var i = 0 ; i < TreeNodes.length ; i++){
			var node = TreeNodes[i];
			if(node != null&&node[1]!=id){
				f.writeLine(node[0]+","+node[1]+","+node[2]);
			}
		}
		f.close();
	maderelation();
	_Hide(f_id.value);
	_Expand(f_id.value,parseInt(fspan.type));
	var img_tag = document.getElementById("img_"+f_id);
	var str = img_tag.src.toString();
	alert(str);
	if(hasChild(f_id)){
		//alert("haschild");
	}else{
		if(str.indexOf("tree_-_mid.gif".toString())!=-1){
			img_tag.src = "tree_mid.gif";
		}else if(str.indexOf("tree_-_end".toString())!=-1){
			img_tag.src = "tree_end.gif";
		}
	}	
		//document.execCommand('Refresh');
}
//增加提交事件
function _submit(){
		var f_id = document.getElementById('fid');
		var f_name = document.getElementById('fname');
		var c_id = document.getElementById('cid');
		var c_name = document.getElementById('cname');
		var newNode = [c_id.value,f_id.value,c_name.value];
		TreeNodes[TreeNodes.length] = newNode;
		document.getElementById("add").style.display="none";

		var f = fso.OpenTextFile("1.txt",8,true); 
		f.writeLine(newNode[0]+","+newNode[1]+","+newNode[2]);
		f.close();
		var f_span = document.getElementById("span"+f_id.value);
		var c_span = document.createElement("span");
		c_span.id = "span"+newNode[0];
		var f_a = document.getElementById(f_id.value);
		var node_links = NodeLink[parseInt(f_id.value)];
		if(node_links==null){
			node_links = new Array();
		}
	  node_links[node_links.length] = newNode;
	  NodeLink[parseInt(f_id.value)] = node_links;
		var num = f_a.type;
		_Hide(f_id.value);
		_Expand(f_id.value,parseInt(num)+1);
		var temp = [f_id.value,true];
		isExpand[f_id.value] = temp;
		//var c_str = "<br>";
			//显示缩进
			//for(var i = 0 ;i<=parseInt(num) ; i++){
			//	c_str += " "
			//}
			//if(hasChild(c_node[0])){
			//	c_str+="<img id='img_"+c_node[0]+"' src='a.gif'/>"
			//}else{
		//		c_str+="<img id='img_"+c_node[0]+"' src='b.gif'>"
			//}
		//	c_str+="…"
		//	var s = parseInt(num)+1;
		//	c_str+="<a id='"+newNode[0]+"' style='cursor:hand' type="+s+" onclick=_click('"+newNode[0]+"',"+s+")>"+newNode[2]+"</a>";
		//	c_span.innerHTML = c_str;
			//加入到本节点下
	//		f_span.appendChild(c_span);
		//document.execCommand('Refresh');
	if(hasChild(f_id)){
		//alert("haschild");
	}else{
		var img_tag = document.getElementById("img_"+f_id.value);
		var str = img_tag.src;
		str = getfxImg(str.toString());
		img_tag.src = str;		
	}
}
function _reset(){
		document.getElementById("add").style.display="none";
}

function getExIndex(id){
	var node = getById(id);
	var f_id = node[1];
	var i = 1;
	while(f_id != "0"){
	        	var temp = getById(f_id);
		if(temp==null)break;
		f_id = temp[1];
		i++;
	}
	return i;
}
function getfxImg(str){
	for(var i = 0 ; i < imgArray.length ; i++ ){
		var temp = imgArray[i];
		if(str.indexOf(temp[0].toString())!=-1){
			return temp[1];
		}
	}
	return str;
}
</script> 
</head>
<body>
<div id="d" style="position:absolute;font-family:Tahoma;font-size:12px;padding:2px;visibility:hidden">
<TABLE BORDER=0 CELLPADDING=1 CELLSPACING=1 bgcolor="#cecece" style="font-family:Tahoma;font-size:12px;">
<TR bgcolor=#ececec>
	<TD><a onclick="right_add()" style="cursor:hand">添加节点</a></TD>
</TR>
<TR bgcolor=#ececec>
	<TD><a onclick="rigth_delete()" style="cursor:hand">删除节点</a></TD>
</TR>

</TABLE>
</div>
<div id="add" style="display:none">
	<input id="fid" type="hidden"/>
	父节点名称：<input disabled id="fname" type="text" value=""/><br>
	节点序号：<input disabled id="cid" type="text" value=""/><br>
	节点内容：<input id="cname" type="text" value=""/><br>
	<input type="button" value="确定" onclick="_submit()"/><input type="button" value="取消" onclick="_reset()"/>
</div>

</body>



说明：需要打文件1.txt 放在桌面
否则你可以改路径
右键可以添加和删除
注意：请用ie6以上版本打开，不支持火狐
dorazs
关注
JAVA实现生成菜单树
qq971473597的博客
06-13 1551
需求： 从数据库中查找出所有菜单项，然后根据父子关系进行拼接封装形成一个菜单树。 效果图： 思路 实体类必备字段：id，parent_id，List<实体类> children 从数据库中根据条件（例如公司id）查找出该条件下所有的菜单项，形成一个List。 遍历这个List转为一个Map，其中Map的key为该菜单项的唯一标示（通常是id），value为电房实体类。 先创建一个返回给前端的集合Set，然后对这个Map进行遍历（我用的是Map的values()方法） 遍历Map的values
ios 圆形旋转菜单_iOS高级动画：圆形树展开&收起动画
weixin_29927289的博客
12-28 402
转自:标哥的技术博客，作者：黄仪标(微博)前段时间帮某某做了一个动画效果，今天分享给大家。关于动画的基础知识，这里不会细说，如果您还没有核心动画的基础知识，请先阅读相关文章，了解核心动画如何使用，然后再继续阅读本篇文章。本篇文章，涉及到以下知识点：如何添加缩放动画如何添加平移动画如何添加旋转动画如何添加关键帧动画如何使用组合动画如何实现渐变图层如何实现圆形渐变进度条温馨提示：新手不适合阅读本篇文章...
菜单树的生成
qq_58595750的博客
01-14 742
权限管理想把权限菜单表做成动态的，就必须在数据库存储菜单和权限信息，也就是所谓的 rbac 权限设计，菜单分为根菜单和子菜单，用户登陆成功跳转到首页，就能看到菜单树，对应的界面，所以需要从后台向前台传递菜单树。 1.在 菜单表中需要添加对应的父级 id 字段 -1 表示是根菜单，需要现在 实体类添加对应子集的 List 字段，然后在 service 层，写分层树型的方法： 然后是 service 层代码： public HomepageMapper homePageMapper;
生成菜单树
qq_34545939的博客
10-28 219
基础对象类： public class Menu { private int idx; /** * This property corresponds to db column <tt>module_id</tt>. */ private String moduleId; /** * This property corresponds to db column <tt>domain_id&l
生成菜单树示例
宫宏伟的博客
05-21 218
menu.java package com.unis.demo.entity; import java.util.List; public class Menu { // 菜单id private String id; // 菜单名称 private String name; // 父菜单id private String parentId; // 菜单...
菜单树
Vsun Sky ── 阿永的博客
02-18 1078
function Menu_Option(Tree,Menu){if (Menu.style.display==none)  {  Menu.style.display=;  Tree.src=;   }else  {  Menu.style.display=none;  Tree.src=Img/Tplus.gif   }}      MainMenu          
老裴帮助关于Javascript动态菜单树的小练习
03-19
JavaScript动态菜单树是一种常见的网页交互元素，用于呈现层次结构的数据，比如网站的导航菜单或组织架构。在网页设计中，动态菜单树能够提供用户友好的界面，使用户能方便地浏览和操作多级数据。本小练习将带你深入...
java的树形菜单。
10-10
在Java编程语言中，树形菜单是一种常见的用户界面元素，用于组织和展示具有层次关系的数据。在本场景中，我们讨论的是...记得实践是检验真理的唯一标准，尝试自己动手实现这样的功能，以巩固理论知识并提升编程技能。
基于ListView的树形菜单-支持节点的增删改
09-14
本教程将深入讲解如何基于ListView创建一个支持节点增删改的树形菜单。 首先，理解树形菜单的基本概念。树形菜单是一种层次结构，每个节点可以有子节点，也可以没有，根节点没有父节点。在ListView中实现这样的结构...
树，菜单树
12-28
菜单树，树结构采用jstree，dtree，自己在后台组装层多效的树。。
菜单树Dtree
07-10
MyEclipse开发web项目，菜单树是一件十分重要的内容，但有些同志苦于没有好的菜单，以致于项目不能很好地组织在一起。 现将js写的菜单树奉献给大家，仅供参考！
菜单树（树数据结构+JSP页面递归调用构建菜单树）
03-26
在Java程序中构建一个菜单树，将根节点root放到request中 然后在JSP页面中通过JSP递归调用显示菜单树
基于C++树形菜单控件源代码
11-26
基于C++树形菜单控件源代码;基于C++树形菜单控件源代码;实现了树控件的添加，删除、重命名、完美拖放等功能
可以动态生成的树型导航菜单
12-20
可以从数据库中提取数据，动态生成菜单树，作为导航，方便快捷开发，其中附带api，简单易用。
菜单树tree
qq_42945407的博客
11-19 683
构建树（一般用于层级菜单） 结果如图所示 // parentId 最顶层父id值 一般为 0 之类 public static List<Tree<String>> ldapOutees(List<LdapCatalogue> catalogueList,String parentId) { List<TreeNode<String>> nodeList = CollUtil.newArrayList(); // 构建树
java 递归实现权限树（菜单树）
ratel的博客
12-18 7939
java 递归实现权限树（菜单树）省市县多级结构
构建菜单树
weixin_30569153的博客
12-10 197
一直以来没工夫仔细琢磨菜单树怎么做，只知道递归，现在才有空闲实现一次。 数据结构： 调用部分的代码，浏览器地址为：http://127.0.0.1:8080/admin/resource/menu?userId=23123 buildTree的代码： public JSONArray buildTree(List<Resource> resListAll, Lis...
C语言实现Kruskal最小生成树算法
"最小生成树算法C语言代码实例，包括Kruskal算法的实现" 最小生成树算法是图论中的一个重要概念，它用于找到连接所有顶点的边权重之和最小的子集，通常用于解决网络设计、资源分配等问题。在C语言中，我们可以用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值