js 实现树 递归

js 实现树  递归

1.css样式

<style type="text/css">
.menu3 {
	width:152px; height:18px; display:block; background: url(../images/folder.png) 9px 3px no-repeat;  font-size: 12px;
	 padding-left: 32px; line-height:26px;
	cursor: pointer;
}
.menu4{
	width:152px; height:18px; display:block; background: url(../images/folder_files.png) 9px 3px no-repeat; font-size: 12px; 
	 padding-left: 40px; line-height:26px;
	cursor: pointer;
}

.file{
	width:122px; height:18px; display:block; background: url(../images/file.png) 20px 5px no-repeat;  font-size: 12px; 
	cursor: pointer;line-height:26px;
	padding-left: 40px;
}
</style>

2.js 代码：获得的json数据的格式为：SELECT classid as id,classname as name,bclassid as pid,islast FROM `zjxx_column` WHERE 1"-----------json baokuo:id,name,pid,islast

pid为父id

islast表示是否为最后一个

<script type="text/javascript">

var all;
var htmlStr=new Array();  
$(document).ready(function(){
	var htm="";
	$.ajax({
	    url: "left111.do",    //请求的url地址
	    dataType: "json",   //返回格式为json
	    async: true, //请求是否异步，默认为异步，这也是ajax重要特性
	    type: "GET",   //请求方式
	    success: function(req) { //获取数据库中的数据
	    	all=req;
	    	loadNode(req,0);
	        var htmlcode="";
		    htmlcode=htmlStr.join("");       
		    $("#treeDemo").html(htmlcode);
	    },
	    complete: function(){
	    }
	});
	

});



function loadNode(req1,pid)
{
   // var vDtbl=_Default.GetChildren(pid).value;
    var obj = new Array();
    var j=0;
    $.each(req1, function (n, json) {//找到有相同pid的对象，也就是属于同一级的对象
    <span style="white-space:pre">	</span>if(json.pid==pid){
    <span style="white-space:pre">		</span>obj[j] = json;
    <span style="white-space:pre">		</span>j++;
    <span style="white-space:pre">			</span>}
    <span style="white-space:pre">	</span> });
   
    if(obj!=null){
   <span style="white-space:pre">	</span> $.each(obj, function (n, json1) {  //对这个同级对象进行一个一个遍历
   <span style="white-space:pre">			</span> htmlStr.push("<table >");
   <span style="white-space:pre">			</span> var id = json1.id;
   <span style="white-space:pre">			</span> var name = json1.name;
   <span style="white-space:pre">			</span> var pid = json1.pid;
   <span style="white-space:pre">			</span> var islast = json1.islast;
   <span style="white-space:pre">			</span> 
   <span style="white-space:pre">			</span> if(islast==0){<span style="white-space:pre">				</span>//来判断是否是最后一级，若是最后一级class为file，图片为一个文件的图标
   <span style="white-space:pre">			</span> htmlStr.push("<tr>");<span style="white-space:pre">		</span>//否则 class为menu3 为文件图标
                htmlStr.push("<td class='menu3' οnclick='nc(this)'  id='"+id+"'>");
               
                htmlStr.push(name);
              
                htmlStr.push("</td></tr>");
            <span style="white-space:pre">	</span> htmlStr.push("<tr id='it"+id+"'  style='display:none' ><td  style='padding-left:10px;'>");
                 if(json1.islast == 0)// 判断该id是否存在子集
                 {
                <span style="white-space:pre">	</span> loadNode(all,id);
                 }
   <span style="white-space:pre">			</span>  }else{
   <span style="white-space:pre">				</span> htmlStr.push("<tr>");
                 htmlStr.push("<td class='file' οnclick='nc(this)'  id='"+id+"'>");
                 htmlStr.push("<a href='../column/manageColumn/listColumn.html'  target='main' >");
                 htmlStr.push(name);
                 htmlStr.push("</a>");
                 htmlStr.push("</td></tr>");
   <span style="white-space:pre">			</span> } 
            
                htmlStr.push("</td>"); 
                htmlStr.push("</tr>"); 
           <span style="white-space:pre">	</span>    htmlStr.push("</table>"); 
   <span style="white-space:pre">	</span> });
    }
    


}






function nc(obj){  //点击函数
<span style="white-space:pre">	</span>var htm1="";
<span style="white-space:pre">	</span>var id = obj.id;
<span style="white-space:pre">	</span>var left = obj.style.padding-left;
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>menuobj<span style="white-space:pre">	</span>= eval("it"+id);
<span style="white-space:pre">	</span>if(menuobj.style.display == '')//处理点击后下一层的显示和隐藏
<span style="white-space:pre">	</span>{
<span style="white-space:pre">		</span>menuobj.style.display<span style="white-space:pre">	</span>= 'none';
<span style="white-space:pre">	</span>}else{
<span style="white-space:pre">		</span>menuobj.style.display<span style="white-space:pre">	</span>= '';
<span style="white-space:pre">	</span>}
<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>switch (obj.className)     //更换点击的样式
<span style="white-space:pre">	</span>{
<span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>case "menu3":
<span style="white-space:pre">			</span>obj.className<span style="white-space:pre">	</span>= "menu4";
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">		</span>case "menu4":
<span style="white-space:pre">			</span>obj.className<span style="white-space:pre">	</span>= "menu3";
<span style="white-space:pre">			</span>break;
<span style="white-space:pre">	</span>}
}
</script>

3。body中：

     
  
		<div id="treeDemo" class="menu" style="width:100%;">
		
		
		</div>