js實現樹形內容展示

 

 

1.首先這里有一個demo，里邊有封裝好的js文件。地址：http://files.cnblogs.com/files/feifeishi/dtree.zip

2.直接上代碼

<div style="height:auto;margin-left: 20px;">  
                  
                  <s:iterator value="targetlist">
    				<input type="text" style="display:none" value="<s:property value="id.targetnumber.trim()"/>" class="targetnumber">
 				 </s:iterator>
 				 <s:iterator value="requirementlist">
    				<input type="text" style="display:none" value="<s:property value="id.requirementnumber.trim()"/>" class="requirementnumber">
 				 </s:iterator>
                  <s:iterator value="pointlist">
    				<input type="text" style="display:none" value="<s:property value="id.pointnumber.trim()"/>" class="pointnumber">
 				 </s:iterator>
                  
	<script type="text/javascript">		
	d = new dTree('d');
	d.add(0,-1,'培養要求樹');		
	d.add(10,0,'培養要求');
	$('.targetnumber').each(function(){
	d.add(this.value,10,'培養目標'+this.value,'Target4.action?targetnumber='+this.value+'', '', 'main');
	});
	$('.requirementnumber').each(function(){
	d.add(this.value,this.value.substring(0,1),'畢業要求'+this.value,'Point.action?requirementnumber='+this.value+'', '', 'main');
	});
	$('.pointnumber').each(function(){
	d.add(this.value,this.value.substring(0,2),'指標點'+this.value,'PointPoint.action?requirementnumber='+this.value+'', '', 'main');
	});
	document.write(d);
		
	</script>

　　前半部分的s標簽是獲得action中傳過來的list的值，從而使js可以使用這些值。js中是寫樹的節點，打印樹。

3.效果截圖：

4.文件中有一個api，其中有重要的參數信息