树形结构之四 web展示方案

爽快些 一下把所有的内容都放上来吧

 

下面放的一段是我通过ajax获得json格式的字符串，并把它展示出来，因为格式的风格的限制这里只列出了二级和三级别结点。

 

上面json字符串的转换会通过另一篇博客与大家分享，是个appache的一个类，支持循环引用检测，使用数据结构中的栈来解决这个问题。

 

js展示代码如下:后面让同事加了一些点击后设置样式的功能，有点乱，不过重心还是在于用js递归所有结点;

 

 

 

	function toURL(url,path,obj) {
		$(".left_zinav").removeClass("left_zinav").addClass("left_world02"); 
	   	$(obj).removeClass().addClass("left_zinav");
	   
	   parent.topframe.toURL(url,path);
	}
	var menu={};//菜单
	menu.data={};//菜单数据
	menu.html='';//菜单里包含的html字符串 通过递归拼接
	menu.sethtml=function(htm){
		menu.html=htm;
	}
	//从服务器加载数据
	menu.loadData=function(){
		$.getJSON("{pageContext.request.contextPath}/login!loadMenu.action",
							function(json){
								if(json.suc&&json.single.children){//加载成功
									menu.data=json.single.children[0];
									menu.write(json.single.children[0]);
									menu.show();
								}else{//加载失败
									window.top.location="${pageContext.request.contextPath}/login!loginUI.action";
								}
							}
				);
		
	}
	//展示
	menu.show=function(){
		$('#targ').html(this.html);
	}
	
	var tmp=''
	var childnum='';
	var num=0;
	var childstyle='';
	var numUrl=0;
	//拼接html
	menu.write=function(nd){
		if(nd.grade==1){
			childnum=nd.children.length;
		}
		
		if(nd.grade==2){
			tmp=nd.text;
			
			if(num==0){
				childstyle="block";
			}else{
				childstyle="none";
			}
			menu.sethtml(menu.html+'<div class="left_nav" onclick="Menu(\''+num+'\',\''+childnum+'\')" ><div class="left_world01">'+nd.text+"</div></div><div style='display:"+childstyle+";' id='children"+num+"'>");
			num++;
		}else if(nd.grade==3){
			tmp=' '+tmp+'  &gt;  '+nd.text;
			menu.sethtml(menu.html+'<div class="left_world02"  style="cursor:pointer;" onclick="toURL(\''+nd.extend.url+'?t=menu\',\''+tmp+'\',this);">'+nd.text+'</div>');
			tmp=nd.text;
		}
		if(nd.children){
			for(var d in nd.children){
				menu.write(nd.children[d]);
			}
			menu.sethtml(menu.html+"</div>");
		}
	}
	//准备完成后加载数据
	$(document).ready(
		function(){
		menu.loadData();
	}
	);
	function Menu(m,count){
		for(var i=0;i<count;i++){
		
			var children=document.getElementById('children'+i).style;
			if(i==m){
				if(children.display=='none'){
					document.getElementById('children'+i).style.display='block';
				}else{
					document.getElementById('children'+i).style.display='none'
				}
			}else {
				document.getElementById('children'+i).style.display='none';
			}
		}
	}

 

 

 

加载数据的方式很多，可以用ajax异步加载过来，也可以用dwr之前通过dwr进行加载后来改成目前这种了 ，

也可以由后台生成的json格式数据放到request里再用eval，或json转化工具进行转化，再进行树的装配与展示。

 

最方便是用下面这种了：

 

用了ligerui（基于jquery的ui框架）的树型工具：

 

 

$("#tree1").ligerTree({  
		            data: data,checkbox: false,nodeWidth: 200,
		            onSelect:function(data,target){
		            	var ex=data.data.extend;
		            	if(ex){
			            	$('#label').val(data.data.extend.label);
			            	$('#descript').val(data.data.extend.descript);
		            	}
		            },
		            onCancelselect:function(){
		            	$('#label').val('');
		            	$('#descript').val('');
		            }
		            
	           });

 

 

上面用到的data可以通过以上说过的方式来获取，也可以配置一个url地址。

 

如 一个下拉列表，列表中的内容是一棵树：

 

 

$("#movetxt").ligerComboBox({
	               	width: 180,
	               	selectBoxWidth: 200,
	               	selectBoxHeight: 200, valueField: 'text',treeLeafOnly:false,
	               	valueField:'id',
	               	tree: { url:"${pageContext.request.contextPath}/depart!getDepartTree.action?instance.departId=1&r="+Math.random(),checkbox:false
	               	}
	           	});

 

 

关于树型结构的处理到这里就已经结束了，谢谢大家!!