Tree +jquery +递归+树菜单+无限级分类

最新推荐文章于 2021-06-03 20:35:23 发布

最新推荐文章于 2021-06-03 20:35:23 发布 · 456 阅读

文章标签：

#jQuery #Ajax #脚本 #JavaScript #CSS #ViewUI

技术专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页树状结构及其操作方法，包括添加子项、添加同级项、保存和删除节点等功能，并通过AJAX与后端进行交互以实现动态更新。

主页面：

<script type='text/javascript' src='/scmis/script/simpleHtmlTree.js'></script>
<script language=javascript src="/scmis/script/jquery.js"></script>
<link rel="stylesheet" href="/scmis/css/site.css" type="text/css">
<style>
 input{font-size:12px;border:1 solid #000000; background-color:#FFFFFF ; }
 </style>
 <body >
    <table border="1" width="100%" cellpadding="0" cellspacing="0" height="426" class="table1">
      <tr>
        <td width="29%" height="80%"    valign="top"><div id="treepanel1"></div> </td>
   
        <td width="71%"  valign="top"> 
		<div></div>
		<div id="xmnr"></div>
		
		
		<div>
 		  <input type="button" name="addzi" onclick="addziNode()" value="添加子项">
		  <input type="button" name="addfu" onclick="addfuNode()" value="添加同级">
		  <input type="button" name="save"  onclick="saveNode()" value="保存修改">
		  <input type="button" name="del" onclick="delNode()" value="删除节点">
 		</div>		</td>      
      </tr>
	</table>
	
  <input name="zijd" type="text" value="" />
  <input name="fujd" type="text" value="0" />
 </body>
<script>
		var simpleTree = new SimpleHtmlTree();//构造树
 		var treeNodePanel = new TreeNodePanel();
		treeNodePanel.setTreeNodePanel(0,'数据库');//参数1：节点ID，参数2：节点文本
		simpleTree.addTreeNode('treepanel1',treeNodePanel);//添加到 treepanel1 下当节点	 	
 	simpleTree.nodeClick = function(nodePanel) {
 		document.getElementById("zijd").value=nodePanel.id;
 		document.getElementById("fujd").value=nodePanel.getAttribute("parentid");
	
	 	// alert("节点Id:"+nodePanel.id);
	 	//alert("node's status:"+nodePanel.getAttribute("menutype"));
	 	//alert("node's level:"+nodePanel.getAttribute("level"));
	 	//alert("node's order:"+nodePanel.getAttribute("order"));
	 	//alert("node's parent's id"+nodePanel.getAttribute("parentid"));
		
	//ajax脚本开始	
			$.ajax({
					type: "POST",
					url: “jcsjb",
					data: "nodePanel="+ nodePanel.id,
					success: function(msg){
								   
								$("#xmnr").html(msg); 
							}
			}); 	
		
//ajax脚本结束	fullNode(nodePanel.id)
	}
 	 
 
  	function add(){
		try{
			var parentId = document.getElementById('parentid').value;
			var id = document.getElementById('newid').value;
			var text = document.getElementById('nodetext').value;
			var treeNodePanel=new TreeNodePanel();
			treeNodePanel.setTreeNodePanel(id,text);
			simpleTree.addTreeNode(parentId,treeNodePanel);
		} catch(e) {
			alert(e.message);
		}
	}
	
	
	//添加 同级目录
  	function addfuNode(){
		try{
			var parentId = document.getElementById('fujd').value;
			var id = document.getElementById('zijd').value;
			var text = document.getElementById('xlmc').value;
			var treeNodePanel=new TreeNodePanel();
			
	//ajax脚本开始------------------------------------------	
			$.ajax({
					type: "POST",
					url: "jcsjb_addnode",
					data: "nodePanel="+ parentId+"&xlmc="+text,
					success: function(msg){
					              var ziid=jQuery.trim(msg);
								 
							treeNodePanel.setTreeNodePanel(jQuery.trim(msg),text);
							simpleTree.addTreeNode(parentId,treeNodePanel);
							//$("#xmnr").html(msg); 
							}
			}); 	
	//ajax脚本结束-------------------------------------
			
			
		} catch(e) {
			alert(e.message);
		}
	}
	
	//添加 子目录
  	function addziNode(){
		try{
			var parentId = document.getElementById('fujd').value;
			var id = document.getElementById('zijd').value;
			var text = document.getElementById('xlmc').value;
			var treeNodePanel=new TreeNodePanel();
			
	//ajax脚本开始------------------------------------------	
			$.ajax({
					type: "POST",
					url: "jcsjb_addnode",
					data: "nodePanel="+ id+"&xlmc="+text,
					success: function(msg){
					
							treeNodePanel.setTreeNodePanel(jQuery.trim(msg),text);
							simpleTree.addTreeNode(id,treeNodePanel);
							  
							}
			}); 	
	//ajax脚本结束-------------------------------------
			
			
		} catch(e) {
			alert(e.message);
		}
	}	
	
        //删除节点	
 	  	function delNode(){
			try{
			     var  jied=document.getElementById("zijd").value;
				document.getElementById(jied).style.display="none";
			} catch(e) {
				alert(e.message);
			}
		} 	  	
		
		//保存节点
		function saveNode(){
			     var  jied=document.getElementById("zijd").value;
			     var  xlmc=document.getElementById("xlmc").value;
		 
	//ajax脚本开始------------------------------------------	
			$.ajax({
					type: "POST",
					url: "jcsjb_save",
					data: "nodePanel="+ jied+"&xlmc="+xlmc,
					success: function(msg){
							alert("修改成功");	   
								//$("#xmnr").html(msg); 
							}
			}); 	
	//ajax脚本结束-------------------------------------
		}
	onload=function fullNode(a) 
{ 		
	 //ajax脚本开始------------------------------------------	
 
			$.ajax({
					type: "POST",
					url: "jcsjb_fullnode",
					data: "no=0",
					success: function(msg){
 								eval(msg);
 							}
			}); 	
	 //ajax脚本结束-------------------------------------

} 
		
 			
</script>

java 递归生成节点

 public String treeInfo(String fuNode )throws SQLException {
        /*
 		*   zr edit
 		*说明：用来生成javascript 创建树结构的脚本
 		*/
	 
 	
 		RecordSet rs =  getRecordSet("  select * from tablegy where name='"+fuNode+"'  order by id   " );
 		String treePrint="";
         int   row=rs.rowCount();
		 
		 if(row==0)
		 {
			 return "";
		 }
		 else
		 {
				for (int i=1; i<=row; i++ ){
					treePrint=treePrint+"node = new TreeNodePanel();	";
			        treePrint=treePrint+"node.setTreeNodePanel("+rs.getValue(i,"di")+",\""+rs.getValue(i,"name")+"\");	";
					treePrint=treePrint+"simpleTree.addTreeNode("+fuNode+",node);	";
			        treePrint=treePrint+treeInfo(rs.getString(i,"id"));
	
				
					//treePrint=treePrint+rs.getString(i,"id")+"; "+treeInfo(rs.getString(i,"id")); 
				} 
  		return treePrint  ;
		 
		 
		 }
 
}

AJAX传值添加节点到数据库

/*省略*/